logo

该视频仅会员有权观看

立即开通课程「React.js 前端应用开发实践」权限。

¥
199
/ 年

在 React 组件里导入样式表

  • 用create react app创建的react应用,在组件中可以使用import导入所需的样式表。
  • 想为应用添加样式,让标题和按钮显示在同一行并添加边框。
  • 创建名为app-header的CSS文件在src/app/components目录。
  • 在app-header.css添加样式,使用.app-header类作为选择器。
  • 设置display为flex,align-items为center,justify-content为space-between,并添加一像素实线边框,颜色#1a1a1a。
  • 设置外边距为24像素。
  • 添加.app-header下的.content选择器,同样配置flex布局。
  • 在app组件顶部用import引入app-header.css。
  • 应用所定义的样式,检查元素看到来自app-header.css的具体样式。