CODEWITHSUNDEEP
reactjsstyled-components
kulls
kulls

Reputation: 885

how to add custom css using react styled component

I have a card and I would like to add custom css name using react styled-component. Please suggest me how do I get the below done ?

<div className='card custom-css'>
  <span> test </span>
</div>

Upvotes: 2

Views: 325

Answers (1)

abhina sathyan
abhina sathyan

Reputation: 11

You can do it in the following ways.

  1. Create a new component out of the div that you need to style - For eg:

    <Test> <span> test </span> </Test>

Then you can style this component as follows - 

const Test = styled.div`
  color: blue; /* write your css here */
`

  1. Style the particular div inside your parent component styling - For eg:

    const Test = () => ( <div className='card'> <span> test </span> </div> )

And style the component as follows -

const Test = styled(Test)`
    .card {
        font-weight: bold;
    }
    color: blue; /* css for the entire component */
`

Also, you can have a particular style for all the div in your component by styling as follows - 

const Test = styled(Test)`
    div {
        font-weight: bold;
    }
    color: blue; /* css for the entire component */
`

Refer here for documentation - https://www.styled-components.com/docs/basics#extending-styles

Upvotes: 1

Related Questions