面试题：React 中常用的组件样式解决方案有哪些及如何使用

Question

请阐述 React 中至少三种组件样式解决方案，比如内联样式、CSS Modules 等，并说明每种方案在定义样式、作用域、动态样式设置方面是如何实现的。

Answer 1

1. 内联样式

• 定义样式：通过 JavaScript 对象字面量形式定义样式。例如：

const divStyle = {
  color: 'blue',
  fontSize: '16px'
};
function App() {
  return <div style={divStyle}>Hello, World!</div>;
}

• 作用域：作用于当前使用该样式对象的组件元素，不会影响其他组件。
• 动态样式设置：可以根据组件的 state 或 props 动态修改样式对象。比如：

function App({ isActive }) {
  const divStyle = {
    color: isActive? 'green' : 'gray',
    fontSize: '16px'
  };
  return <div style={divStyle}>Hello, World!</div>;
}

2. CSS Modules

• 定义样式：创建一个与组件同名的 .module.css 文件（例如 Button.module.css），在其中定义常规 CSS 样式。例如：

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
}

• 作用域：CSS Modules 会自动为每个类名生成唯一的哈希值，确保样式只作用于当前组件，不会与其他组件的样式冲突。

import styles from './Button.module.css';
function Button() {
  return <button className={styles.button}>Click me</button>;
}

• 动态样式设置：可以结合 JavaScript 逻辑，根据组件的 state 或 props 动态添加或移除类名。比如：

import styles from './Button.module.css';
function Button({ isActive }) {
  const buttonClass = isActive? `${styles.button} ${styles.active}` : styles.button;
  return <button className={buttonClass}>Click me</button>;
}

3. Styled Components

• 定义样式：使用 JavaScript 函数来创建样式化组件。例如：

import styled from'styled-components';
const Button = styled.button`
  background-color: blue;
  color: white;
`;
function App() {
  return <Button>Click me</Button>;
}

• 作用域：每个样式化组件都有自己独立的作用域，生成的 CSS 类名是唯一的，避免样式冲突。
• 动态样式设置：可以通过传递 props 来动态修改样式。比如：

import styled from'styled-components';
const Button = styled.button`
  background-color: ${props => props.isActive? 'green' : 'blue'};
  color: white;
`;
function App() {
  const [isActive, setIsActive] = useState(false);
  return <Button isActive={isActive}>Click me</Button>;
}

4. Sass/Less 结合普通 CSS

• 定义样式：使用 Sass 或 Less 预处理器编写样式，语法更灵活，例如 Sass 的嵌套语法。先创建一个普通的 .scss 或 .less 文件（如 styles.scss）。

/* styles.scss */
.button {
  background-color: blue;
  color: white;
  &:hover {
    background-color: darkblue;
  }
}

• 作用域：默认情况下，普通 CSS 样式作用于全局，可能会导致样式冲突。但可以通过 BEM 等命名规范或 CSS 封装技术来模拟局部作用域。例如采用 BEM 规范：

/* styles.scss */
.component-name__element--modifier {
  /* 样式 */
}

• 动态样式设置：可以结合 React 的 state 和 props 通过 JavaScript 操作类名来实现动态样式。例如，在组件中根据 state 动态添加类名：

import React, { useState } from'react';
import './styles.scss';
function App() {
  const [isActive, setIsActive] = useState(false);
  return <div className={`component ${isActive? 'component--active' : ''}`}>Content</div>;
}