2

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>
Improve this question
2
  • You can find the info here: styled-components.com/docs/basics Commented Aug 1, 2019 at 16:10
  • Can you suggest any samples which use { css } from styled-components. I did not find from the given link Commented Aug 1, 2019 at 16:14

1 Answer 1

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.