介绍

在这个模块中，我想专注于造型的反应组成部分，因为它比迄今为止所解决的问题更多。对于一个我想要看看如何动态调整样式或类名，我也想向您展示如何使用内联样式的这种限制，因此具有范围的样式但具有无法使用的限制媒体查询或伪选择器或使用CSS文件以及具有全局风格的方法几乎可以处理这一点，并将潜入所有在本课程模块中使用样式的方式。

问题集

到目前为止，我回到了这个项目。我们在那里得到了一些基本的造型，例如，我们输出人员和按钮的这些卡。
让我们从按钮开始，例如，当我们悬停在它上面时，我们已经有一个问题，它不会改变样式。
正如我们使用的是JSVSDcript对象在JSX代码中创建样式，然后对将该对象设置为实际HTML元素的关心。 uissue是我们不能在那里使用pseudos选择器。

...
render(){
  const style = {
    background: '#ededed',
    font: 'inherit',
    border: '1px solid black',
    padding: '8px',
    borderRadius: '4px',
    boxShadow: '0 2px 3px #ccc',
  };
  return (
    <div className="App">
      <button style={style} onClick={this.togglePersonsHandler}>
        Toggle Person
      </button>
    </div>
  );
}
...

this advantage of core is the styling only applies on ut to that button and not to other buttons on the application if we had another button, and I already mentioned the alternative would be to style it in CSS file and there we can use normal CSS including pseudo selector button:hover{} but this will globally affect all buttons in our application even they are placed in other components.
这是我想在这个模块中处理的问题设置，但除此之外，我也想看看别的东西......
如果我们想动态改变样式，请从中启动它。

让我们说切换人员按钮应该有 绿色 如果我们即将显示单击和a的人，则反向颜色 红色的 背景颜色如果我们即将删除人员列表。
让我们看看我们如何在下一个课程中动态改变样式......

React introduction
React Component