如何覆盖样式组件中的 css class

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

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

Answer 2

它的工作原理与 css 相同。

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