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?

Answer 1

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