面试官：react 代码使用css有哪些方式？各自有什么优劣？

方式

在 React 中使用 CSS 有几种常见的方式，具体取决于你的项目需求和个人偏好：

1. 普通的 CSS 文件引入：你可以直接在 React 组件中引入普通的 CSS 文件，然后在 JSX 中使用引入的样式类名。

import './styles.css';

const MyComponent = () => {
  return <div className="my-style">Hello, World!</div>;
};

2. 内联样式：你可以在 JSX 中直接使用内联样式，通过 style 属性传递样式对象。

const style = {
  color: 'red',
  fontSize: '16px',
};

const MyComponent = () => {
  return <div style={style}>Hello, World!</div>;
};

3. CSS 模块：你可以使用 CSS 模块来管理组件的样式，将样式文件的后缀改为 .module.css，然后在组件中引入并使用。

/* styles.module.css */
.myStyle {
  color: blue;
}

import styles from './styles.module.css';

const MyComponent = () => {
  return <div className={styles.myStyle}>Hello, World!</div>;
};

4. CSS-in-JS：你可以使用 CSS-in-JS 库，如 styled-components、Emotion 等，在 JavaScript 文件中直接编写样式。

import styled from 'styled-components';

const StyledDiv = styled.div`
  color: green;
`;

const MyComponent = () => {
  return <StyledDiv>Hello, World!</StyledDiv>;
};

优劣对比

1. 普通的 CSS 文件引入：

   • 优点：

     • 简单直观，易于理解和使用。
     • 支持全局样式和局部样式，适用于各种场景。

   • 缺点：

     • 全局污染：CSS 文件中的样式可能会影响其他组件，容易发生样式冲突。
     • 缺乏模块化：难以维护和复用样式。

2. 内联样式：

   • 优点：

     • 可以直接在组件中定义样式，便于维护和修改。
     • 样式与组件耦合紧密，方便进行组件封装。

   • 缺点：

     • 不利于样式重用：每次使用相同样式的组件都需要重新定义样式。
     • 可读性差，样式逻辑与组件逻辑混合在一起，不易维护。

3. CSS 模块：

   • 优点：

     • 解决了全局污染和样式冲突的问题，提高了样式的可维护性。
     • 支持局部作用域，每个模块的样式不会影响其他模块。
     • 可以方便地实现样式的复用和组件化。

   • 缺点：

     • 学习成本较高，需要了解并配置 CSS 模块的使用规则。

4. CSS-in-JS：

   • 优点：

     • 样式与组件紧密结合，方便进行组件化和样式的复用。
     • 支持动态样式和响应式设计，可以根据组件状态动态调整样式。
     • 提供了丰富的工具和功能，例如嵌套样式、主题变量等。

   • 缺点：

     • 学习曲线较陡，需要学习额外的库和语法。
     • 可能会增加项目的复杂性和依赖性。

综上所述，每种方式都有其适用的场景和局限性，开发者可以根据项目需求和团队技术栈选择合适的方式。