Search code examples
cssreactjsstyled-components

react how to style : styled-dropdown-component

I am trying to change the color and the size of the DropdownMenu using the styled-components like the code below:

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

Then I try to use it like this:

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

But it gives me an error saying that _styledComponents.default.DropdownMenu is not a function.

I am very new to styling with css and it is very confusing, so any advice or guide would be really appreciated! :)

Edited

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

  • If you trying to style a custom component you need to use styled as a function:

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

    Edit flamboyant-franklin-jkn96

    It will work only if the custom component uses the className props.

    Therefore, you sometimes want to style custom component's parent, and target the styling with selectors - as it's just a CSS:

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

<Wrapper>
  <Dropdown />
</Wrapper>