反应如何设置样式：styled-dropdown-component答案

【问题标题】：react how to style : styled-dropdown-component反应如何设置样式：styled-dropdown-component
【发布时间】：2020-01-21 18:37:21
【问题描述】：

我正在尝试使用styled-components 更改DropdownMenu 的color 和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";

【问题讨论】：

不知道DropdownMenu组件是什么，能不能也附上一下？

标签： css reactjs styled-components

【解决方案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>

【讨论】：

非常感谢您的回答。感谢工作:)。我还有一个问题。例如，我可以通过编写border: none; 来更改border，但如何找到其他options，例如在悬停时更改背景颜色。我在哪里可以找到所有这些选项？
您需要调试样式，尝试使用浏览器的开发工具，或者您可以直接在组件的文档中挖掘 - 没有阅读 API 没有人猜不到。