时间戳

首页 > 解决方案 > 反应如何设置样式：styled-dropdown-component

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

问题描述

我正在尝试使用下面的代码来更改color和：sizeDropdownMenustyled-components

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";

标签： cssreactjsstyled-components

解决方案

如果您尝试设置自定义组件的样式，则需要将styled其用作函数：

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

编辑华丽-富兰克林-jkn96

只有当自定义组件使用道具时它才会起作用。className

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

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

<Wrapper>
  <Dropdown />
</Wrapper>

推荐阅读