How can I use a .css stylesheet in React?

Question

So I have a very large stylesheet and I'm attempting to use it in my React code. I know typically you would use this format for styling in React:

transparentBg: {
    background: 'transparent'
},

WhiteText: {
    color:'white'
},

However, my css stylesheet looks like this:

.transparentBg{
    background: transparent;
}

.WhiteText{
    color:white;
}

Is there anyway to convert my entire CSS stylesheet into that React-style format? Or a way for me to just use the original CSS stylesheet without converting it?

Misha Reyzlin · Accepted Answer · 2016-09-27 13:59:29Z

3

Your CSS is still just CSS and React still just renders HTML elements on the page.

This means that you can add your large CSS file into html file and just add CSS classes / ids etc. that you define there to the elements in React.

So if you have

.transparentBg{
    background: transparent;
}

.WhiteText{
    color:white;
}

Then in your React components you can use these classes:

var SomeComponent = function () {
  return <div className="WhiteText">
    Foo Bar Baz
  </div>;
};

answered Sep 27, 2016 at 13:59

Misha Reyzlin

13.9k4 gold badges56 silver badges65 bronze badges

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

1 Comment

user6839561 Over a year ago

Finally got it. Thank you so much!

Collectives™ on Stack Overflow

How can I use a .css stylesheet in React?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related