реагировать на стиль: style-dropdown-component

Question

Я пытаюсь изменить color и size DropdownMenu, используя styled-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";

Answer 1

Если вы пытаетесь стилизовать пользовательский компонент, вам нужно использовать styled как функцию:

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

Это будет работать только в том случае, если в пользовательском компоненте используются реквизиты className.

Следовательно, иногда вам нужно стилизовать родительский компонент пользовательского компонента и настроить стили с помощью селекторов - так как это просто a CSS:

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

<Wrapper>
  <Dropdown />
</Wrapper>