using inline css in spfx webpart

Question

I am trying use inline css in html content but it shows the error you see in the picture below;

How can I use inline css in spfx webpart ?

Answer 1

<div className={`ms-Grid-col ms-u-md3`} style={{"border-color": "black"}}>
//Some Code
</div>

Answer 2

It is not a good practice to do it. You should better use the sass files and define your styles there. Since this is not HTML, but JSX you can do something like this:

var style = {
      color: 'white',
      fontSize: 200
    };

return <div style={style}> Have a good and productive day! </div>;

but this is not recommended. The code piece is not mine, but taken from this post React.js inline style best practices

Answer 3

Simple way to do it is as follows,