使用 Create React App 创建的 React 应用,在组件里可以直接使用 import 导入组件需要的样式表。
现在我想给这个 AppHeader 添加点样式,比如让这个标题还有按钮显示在同一行,再给它添加一个边框。先创建一个样式表,放在 src/app/components 里面,名字是 app-header.css。
在样式表里添加点样式,用 .app-header 作为样式选择器,把 display 设置成 flex,align-items 设置成 center,justify-content 是 space-between,然后添加一个下边框,border-bottom,1px solid 颜色是 #eaeaea,再把 margin-bottom 设置成 24px。
下面再添加一段样式,选择器是 .app-header > .content ,把 display 设置成 flex,align-items 设置成 center。
然后打开 AppHeader 组件,在文件的顶部,可以用 import 导入组件的样式表,这里就是当前目录下的 app-header.css。
在浏览器上观察一下,现在 AppHeader 组件负责的界面会使用我们定义好的样式。检查一下页面元素,选中 .app-header 这个元素,右边会显示具体的样式,你会发现这块样式来自 app-header.css 这个样式表。