css - 如何覆盖样式组件中的 css 类

Question

在 Search.tsx 中:

import { SearchInput } from Search.styles.ts

<SearchInput
    onChange={handleChange}
    value={values["searchValue"]}
    placeholder="Search"
    type="text"
    name="searchValue"
/>

输出 html:

<div class="1">
  <div class="2">
    <div class="3">
      <span class="InputWrapper">
        <input placeholder="Search" name="searchValue" class="Input input normalVariant" formnovalidate="" type="text" value="" >
      </span>
    </div>
  </div>
</div>

在 Search.styles.ts 中:

import * as Toolkit from "@some_repo/toolkit";
export const SearchInput = styled(Toolkit.Input)`
  InputWrapper: 100%
`

我想设置 InputWrapper: width 100%，正确的做法是什么？

Answer 1

它就像 css 一样工作。

import * as Toolkit from "@some_repo/toolkit";
export const SearchInput = styled(Toolkit.Input)`
  .InputWrapper {
    width: 100%;
};