如何在样式组件中覆盖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

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%;
};