绑定样式

在 React 中,绑定样式主要有两种方式：通过 style 属性绑定内联样式,以及通过 className 属性绑定类名。此外,还可以通过引入样式文件来应用全局或局部样式。

绑定内联样式

内联样式通过 style 属性绑定,其值必须是一个对象。对象的键是 CSS 属性名（驼峰命名法）,值是对应的 CSS 属性值。

1// 单位可以省略
2export default function App() {
3  return (
4    <>
5      {/* 这里第一个{}代表js环境,第二个 {} 代表对象格式 */}
6      <div style={{ width: 200, height: "100px", backgroundColor: "orange" }}></div>
7    </>
8  );
9};

1const myStyle = { width: "200px", height: "100px", backgroundColor: "orange" }
2
3export default function App() {
4  return (
5    <>
6      <div style={myStyle}></div>
7    </>
8  );
9};

:::

绑定类名

类名通过 className 属性绑定,其值可以是字符串、条件表达式或数组。

1export default function App() {
2  const isActive = true;
3
4  return (
5    <>
6      <div className={isActive ? 'active' : 'inactive'}>内容</div>
7    </>
8  );
9}

1export default function App() {
2  const isActive = true;
3  const hasError = false;
4
5  return (
6    <>
7      <div className={['base', isActive ? 'active' : '', hasError ? 'error' : ''].join(' ')}>
8        内容
9      </div>
10    </>
11  );
12}

:::

引入样式文件

全局样式

定义一个单独的 CSS 文件,文件名为 xx.css,然后在组件中引入该文件。

1.box {
2  width: 100px;
3  height: 100px;
4  background-color: orange;
5}

1import "./App.css";
2
3export default function App() {
4  return (
5    <>
6      <div className="box"></div>
7    </>
8  );
9};

:::

局部样式

局部样式通过模块化的方式引入,文件名为 xx.module.css。引入后,样式名会被自动转换为唯一的类名,避免全局样式冲突。

1.container {
2  width: 100px;
3  height: 100px;
4  background-color: blue;
5}
6.container-title {
7  color: pink;
8}

1import "./App.css";
2import style from "./App.module.css";
3
4export default function App() {
5  return (
6    <>
7      <div className="box"></div>
8      <div className={style.container}></div>
9      <div className={style["container-title"]}>title</div>
10    </>
11  );å
12};

::: 通过脚手架最终它会编译成特殊的样式名

1<div class="_container_1siw5_1"></div>

style["container-title"] 这种能不能用驼峰写法呢？

其实vite脚手架是提供了这个能力的,但需要手动配置

1import { defineConfig } from 'vite'
2import react from '@vitejs/plugin-react-swc'
3
4// https://vitejs.dev/config/
5export default defineConfig({
6  plugins: [react()],
7  css: {
8    modules: {
9      localsConvention: 'camelCase'
10    }
11  }
12})

绑定样式#

绑定内联样式#

绑定类名#

引入样式文件#