CODEWITHSUNDEEP
cssreactjsstyled-components
kirimi
kirimi

Reputation: 1400

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

Upvotes: 0

Views: 1269

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53884

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>

Upvotes: 1

Related Questions