styled-components pass props

Coding Era answered on August 4, 2021 Popularity 7/10 Helpfulness 2/10

answer styled-components pass props

related passing props styled components

related styled component with props

related how to pass props to styled component

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 typescript

Link to this answer
Share Copy Link

Contributed on Oct 04 2023

Coding Era

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

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 j

Link to this answer
Share Copy Link

Contributed on Mar 21 2023

Ahmed ElNawawy

0 Answers Avg Quality 2/10

styled-components pass props

Contents

More Related Answers

styled-components pass props

Closely Related Answers

passing props styled components

styled component with props

how to pass props to styled component

Grepper

Documentation

Social

Legal

Contact

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