react学习之样式的编写

1.html:

<div id="root"></div>

直接在js中写 --- 样式1:

ReactDOM.render(
  <h1 style={{color:'blue'}}>Hello, world!</h1>,
  document.getElementById('root')
);

效果如图：

react学习之样式的编写

样式2：

css:

.hi{
  color:red
}

js:

ReactDOM.render(
  <h1 className='hi'>Hello, world!</h1>,
  document.getElementById('root')
);

效果如图：

react学习之样式的编写

样式3：

js:

ReactDOM.render(
  <h1 style={{color:'orange',fontSize:'60px'}}>Hello, world!</h1>,
  document.getElementById('root')
);
document.getElementById('root').style.paddingLeft='150px'

效果如图：

react学习之样式的编写