CODEWITHSUNDEEP
cssreactjsstyled-components
KwehDev
KwehDev

Reputation: 371

Styled-Components apply style based on ID

Say I have a StyledButton with the following structure;

<StyledButton className={`button-${id}`}>{content}</StyledButton>

Where StyledButton is

const StyledButton = styled.button`
  ...
`;

I would like to specify additional styles to be applied if the Button className equals a value. Which selector could I use within StyledButton to apply styles if the StyledButton has a specified class?

Upvotes: 1

Views: 2901

Answers (1)

Itay Ganor
Itay Ganor

Reputation: 4205

You can always add inline functions inside the template literal of Styled Components. You receive props as the first argument.

const StyledButton = styled.button`
    ${props => props.className === 'foo-bar' && css`
        color: red;
    `};
`;

If you're not sure which props you're getting, you can easily check by:

const StyledButton = styled.button`
    ${console.log};
`;

Upvotes: 5

Related Questions