- Objective:
- Breadcrumb:
# 概念阐释
## 语义
在React中定义样式，通常有3种方法：
- inline style and style objective variables
- style syntax
- multiple stylesheets
## 语法
### inline style 要用{{ }}
```jsx
// inline style 要用{{ }}
<h1 style={{background: 'lightgreen', color: 'darkgreen'}}>Style This With Inline Styling</h1>
```
### style objective variables 将style放在对象变量中
```jsx
const myStyle = {
background: 'lightblue',
color: 'darkblue'
}
function StyleDemo() {
return (
<>
<h1 style={myStyle}>Style This With Style Object Variable</h1>
</>
);
}
//对象中的对象, 和组块是一个道理，样式多了需要拆分
const styles = {
header: {
textDecoration:'underline'
},
paragraph:{ }
}
function demoStyle () {
return <h1 style={styles.header}> 有下划线的h1标题 </h1>
}
```
### stylesheets
- 以模块的方式命名`fileName.module.css`，就可以创建多个css stylesheets了
- 将所有的style 模块放在style 文件夹内，并在对应的js文件中导入
- 用`className={}`来调用style
### css文件
```js
import "./App.css";
```
### clsx
`clsx`是一个 js 库，`clsx`的主要用途是在React等JavaScript框架中动态地添加多个或组合CSS类名。
- 安装
```bash
npm install --save clsx
```
- 使用
```
<header className={clsx('hero hero--primary', styles.heroBanner)}>
...
</header>
```
# 实例
## camelCase实例
- marginLeft, marginRight
- paddingTop, paddingBottom
- backgroundColor
- justifyContent
- alignItems
- borderRadius
- fontZize, fontWeight
- textAlign
# 相关内容
## 语法规则
- 对象名称与属性名称都要使用camelCase，而不是[[React 组件 函数组件]]的PascalCase
- 不要使用任何`-` ，会被解释为减号
- 样式的值通常以字符串的形式出现，`backgroundColor: 'red'`
- 对于数字值有两种写法
- 如果用的是`px`单位，可以使用字符串或直接写数字： `{ fontSize: 30 }` 或者 `{ fontSize: '30px' }`
- 其他单位只能用字符串：`{ fontSize: "2em" }`
# 参考资料
- [Style Syntax样式语法](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-intermediate-react-b676016c-c826-45d3-aba8-c29dbcf2d25e/lessons/react-style/exercises/style-name-syntax)