如何覆盖样式组件中的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%;
};

Answer 2

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