介绍

在本模块中，我想重点介绍对React组件进行样式设置，因为到目前为止，它的功能远远超出您要解决的内容。对于我，我想看看如何动态调整样式或类名，并且还想向您展示如何解决这种限制，避免曾经使用内联样式并因此限制了样式，但是有一些限制，例如无法使用媒体查询或伪选择器或使用CSS文件且具有全局样式的媒体，有两种处理方式，在本课程模块中，将深入探讨所有使用样式的方式。

问题集

我回到了到目前为止我们从事的项目。我们在那里有了一些基本的样式，例如，这些卡在其中输出人员和按钮。
让我们从按钮开始，例如，当我们将鼠标悬停在按钮上时，已经有一个问题，它不会改变样式。
当我们使用jsvsdcript对象在JSX代码中创建样式时，React会考虑将该对象设置为实际的HTML元素。问题是我们不能在那里使用伪选择器。

...
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.
这是我要在本模块中处理的问题集，但除此之外，我还想看看其他内容……
如果我们想动态更改样式，那我们先开始吧。

可以说“切换人物”按钮应具有 绿色 背景颜色，如果我们要向用户显示单击和 红 背景颜色（如果我们要删除人员列表）。
让我们看看如何在下一课中动态更改样式…

反应introduction
反应Component