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

styled component with props

Add Answer

Grieving Gharial answered on August 4, 2021 Popularity 10/10 Helpfulness 5/10

answer styled component with props

related how to set default props in styled components

related passing props styled components

related styled-components pass props

related how to pass props to styled component

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

Link to this answer
Share Copy Link

Contributed on Aug 04 2021

Grieving Gharial

0 Answers Avg Quality 2/10

Closely Related Answers

how to set default props in styled components

Comment

// define your css
const Button = styled.button`

  /* your css... */

  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};

  /* your css... */

`;

// pass default props
Button.defaultProps = {
  theme: {
    main: "#BF4F74"
  }
}

Popularity 8/10 Helpfulness 6/10 Language javascript

Source: styled-components.com

Tags: default javascript java

Link to this answer
Share Copy Link

Contributed on Jan 20 2024

Fine Ferret

0 Answers Avg Quality 2/10

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

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 component with props

Contents

More Related Answers

styled component with props

Closely Related Answers

how to set default props in styled components

passing props styled components

styled-components pass 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.