介绍
在本模块中,我想重点介绍对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.
这是我要在本模块中处理的问题集,但除此之外,我还想看看其他内容……
如果我们想动态更改样式,那我们先开始吧。
可以说“切换人物”按钮应具有 绿色 背景颜色,如果我们要向用户显示单击和 红 背景颜色(如果我们要删除人员列表)。
让我们看看如何在下一课中动态更改样式…