Using standard style css in React and JSX

Question

I have css below.

in myCss.css

.playlist { margin: 200 200; }
.playlist .channel { background: grey; }

and in JSX

import "./myCss.css"
.
.

render (){
  return (
    <div className="playlist" id="playlist">
    </div>
  )
}

It doesn't work. OK maybe I need some special way to JSX.

I googled around and found some ways like styled component .

However I want to use normal css way because some parameters like .playlist.channnel is generated by library in the <div className="playlist" id="playlist"> .

So I can't change.

I want to stick with normal css in React and JSX.

Is it impossible???

Answer 1

Chances are your bundler is not loading the css file. If you are using Webpack, have a look at css-loader - https://webpack.js.org/loaders/css-loader/

Aside, styled-components is excellent, and you could use it along side your 'standard' css. You could define your 'standard' css using createGlobalStyle - https://styled-components.com/docs/api#createglobalstyle and use the styled api for everything else.

Answer 2

Maybe problem with

.playlist { margin: 200 200; }

First of all, you need to specify px . It becomes:

.playlist { margin: 200px 200px; }

Second of all, you remove second 200 . Since it has no sense.

.playlist { margin: 200px; }