对如何设置样式做出反应：styled-dropdown-component

Question

我正在尝试使用 styled-components 更改 color 和 DropdownMenu 的 size，如下面的代码：

const DropdownCustom = styled.DropdownMenu`
  font-family: sans-serif;
  font-size: 1.3rem;
  border: none;
  border-radius: 5px;
  background-color: red;
`;

那我试试这样用:

 <Dropdown>
            <button onClick={() => setState(!state)}>Create</button>
            <DropdownCustom hidden={!state}>
              <DropdownItem>Action</DropdownItem>
              <DropdownItem>Another action</DropdownItem>
              <DropdownItem>Something else here</DropdownItem>
            </DropdownCustom>
 </Dropdown>

但是它给了我一个错误说 _styledComponents.default.DropdownMenu is not a function。

我对 css 的造型还很陌生，而且很困惑，所以任何建议或指南都将不胜感激！ :)

已编辑

import {
  Dropdown,
  DropdownItem,
  DropdownMenu
} from "styled-dropdown-component";

Answer 1

如果您尝试设置自定义组件的样式，您需要使用 styled as a function:

const DropdownCustom = styled(DropdownMenu)`
  font-family: ...
`;

只有 custom component uses the className props.

因此，您有时想要为自定义组件的父级设置样式，并使用选择器来定位样式 - 因为它只是一个 CSS:

const Wrapper = styled.div`
  font-family: ...;
  .dropDown {
    ....;
  }
`;

<Wrapper>
  <Dropdown />
</Wrapper>

对如何设置样式做出反应：styled-dropdown-component

react how to style : styled-dropdown-component

css

reactjs

styled-components