score:0

write a css file inside public folder. and link that css file in to your index.html file.

public/css/custom.css

.some-class {
         'color' : red
}

public/index.html

<link href="css/custom.css" rel="stylesheet" type="text/css" />

then use that css calss in side classname="some-class"

or

you can directlly do this

style = {{'color' : 'red'}}

or

render() {
   const text-color = {
       'color' : 'red'
   }

  return <div style={text-color}></div>
}

score:1

it looks like you use bootstrap. if you also use webpack and node_modules (this folder should be in your project's root directory) then see if the bootstrap folder is there. if it is, then you can connect it that way:

import react from "react";
import "bootstrap/dist/css/bootstrap.css";

if this folder is not there - then install it through the command npm install bootstrap and you should see the appropriate styles.

also you should add css-loader in your rules section of webpack config:

 rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],

https://github.com/webpack-contrib/css-loader

edit:

for old versions of webpack use loaders keyword:

 module: {
        loaders: [
            {
                test: /\.js?/,
                include: src_dir,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader'],
            },
        ],
    }

score:1

you can easily grab the button via type. classname did not work for me, too. the "type"-solution works excellent for me:

html:

 <button type="no-margin">button</button>

css:

button,
[type="no-margin"] {
  margin: 0;
}

Related Query

More Query from same tag