Breaking News: Grepper is joining You.com. Read the official announcement!

how to pass props to styled component

Add Answer

Ahmed ElNawawy answered on August 4, 2021 Popularity 9/10 Helpfulness 1/10

answer how to pass props to styled component

related passing props styled components

related styled component with props

related styled-components pass props

how to pass props to styled component

Comment

directly
color: ${props => props.theme.main};

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: styled-components.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Mar 21 2023

Ahmed ElNawawy

0 Answers Avg Quality 2/10

Closely Related Answers

passing props styled components

Comment

<Button color="black">Click Me</Button>
<Div borderColor="green"></Div>

const Button = styled.button`
    padding: 2px 5px;
    color: ${props => props.color ? props.color : "white"};
    border-radius: 3px;
`

const Div = styled.div`
    padding: 10px;
    color: palevioletred;
    border: 1px solid ${props => props.borderColor ? props.borderColor : "palevioletred"};
`

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 27 2022

Marwen Labidi

0 Answers Avg Quality 2/10

styled component with props

Comment

 <Separator thin />
   
const Separator = styled.div`
  display: block;
  width: 100%;
  height: 1px;
  margin: ${props => props.thin? '7px auto 0':'10px auto'};
`;

export default Separator;

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 04 2021

Grieving Gharial

0 Answers Avg Quality 2/10

styled-components pass props

Comment

const Button = styled.button<{ $primary?: boolean; }>`
  /* Adapt the colors based on primary prop */
  background: ${props => props.$primary ? "#BF4F74" : "white"};
  color: ${props => props.$primary ? "white" : "#BF4F74"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button $primary>Primary</Button>
  </div>
);

Popularity 7/10 Helpfulness 2/10 Language typescript

Source: Grepper

Tags: styled-components styled-component

Link to this answer
Share Copy Link

Contributed on Oct 04 2023

Coding Era

0 Answers Avg Quality 2/10

how to pass props to styled component

Contents

More Related Answers

how to pass props to styled component

Closely Related Answers

passing props styled components

styled component with props

styled-components pass props

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.