React:组件基础样式处理

介绍

React组件基础的样式控制有两种方式:

  1. 行内样式(仅在简单的情况下使用,不推荐)
  2. 单独声明一个样式文件,通过class类名控制(推荐)

示例

行内样式

React:组件基础样式处理_第1张图片

React:组件基础样式处理_第2张图片

使用行内样式,但将样式定义为一个常量

React:组件基础样式处理_第3张图片

React:组件基础样式处理_第4张图片

单独声明一个样式文件,通过class类名控制

定义一个样式文件:
React:组件基础样式处理_第5张图片

在组件中导入样式文件:
React:组件基础样式处理_第6张图片

React:组件基础样式处理_第7张图片

你可能感兴趣的:(前端,React)