React 工具和库面试题, React 中引入 CSS 的方式有哪些?

Step 1

Q:: React 中引入 CSS 的方式有哪些？

A:: React 中引入 CSS 的方式主要有以下几种：1. 外部样式表：通过引入外部 CSS 文件到组件中；2. 内联样式：直接在 JSX 元素上使用 style 属性，通常用于动态样式；3. CSS 模块：使用 CSS Modules 可以实现样式的局部作用域，避免全局污染；4. Styled Components：通过 styled-components 库创建组件级别的样式；5. Emotion：类似 styled-components 的 CSS-in-JS 库；6. Tailwind CSS：实用型的 CSS 框架，可以直接在 JSX 中使用预定义的类名。

Step 2

Q:: 如何在 React 项目中使用 CSS Modules？

A:: 要在 React 项目中使用 CSS Modules，首先需要确保你的样式文件名以 .module.css 结尾。然后，在组件中引入该 CSS 文件，如 import styles from './styles.module.css';。之后，你可以通过 styles.className 的方式来引用类名。CSS Modules 的优势在于它会自动生成一个局部作用域的类名，避免全局污染。

Step 3

Q:: 内联样式与外部样式表相比有什么优缺点？

A:: 内联样式的优点是它直接绑定到组件上，适合处理动态样式或局部样式，不会污染全局样式；缺点是难以重用和维护，且无法应用 CSS 伪类和媒体查询。外部样式表则适合定义全局样式或共享样式，易于维护和复用，但可能会导致样式冲突和全局污染。

Step 4

Q:: 什么是 Styled Components？它如何与传统的 CSS 引入方式不同？

A:: Styled Components 是一个 CSS-in-JS 的库，它允许你将样式写成 JavaScript 代码，并与 React 组件紧密结合。与传统的 CSS 引入方式不同，Styled Components 创建了一个样式化的 React 组件，样式与组件的逻辑紧密耦合，减少了样式污染的可能性，并且支持动态样式和主题化管理。

Step 1

Q:: React 中引入 CSS 的方式有哪些？

A:: 在 React 中，你可以通过以下几种方式引入 CSS： 1. 外部 CSS 文件：直接在组件中使用 import './style.css'; 来引入外部 CSS 文件。适合应用全局样式。 2. 内联样式：通过 style 属性直接在 JSX 元素中使用 JavaScript 对象定义样式，如 <div style={{color: 'red', fontSize: '12px'}}>Hello</div>。 3. CSS Modules：使用 CSS 模块化，样式文件命名为 *.module.css，然后通过 import styles from './style.module.css'; 引入，并使用 styles.className 来应用样式。这样可以避免样式冲突。 4. **Styled Components**：使用 styled-components 或 emotion 这样的库，允许你在 JavaScript 中编写 CSS，并将其与组件逻辑紧密结合，如 const Button = styled.button 这种方式。 5. **Sass/Less 等预处理器**：可以使用诸如 Sass 或 Less 的 CSS 预处理器，并通过配置 webpack 或 CRA 直接在 React 项目中使用。

Step 2

Q:: 什么是 CSS Modules？

A:: CSS Modules 是一种 CSS 文件的模块化方法，它可以生成唯一的类名，以确保不同组件之间的样式不会发生冲突。在使用 CSS Modules 时，CSS 文件通常命名为 *.module.css，然后通过 import styles from './style.module.css'; 来引入，应用样式时使用 styles.className。

Step 3

Q:: 内联样式与外部 CSS 文件相比有哪些优缺点？

A:: 内联样式的优点是它与组件逻辑紧密结合，能够动态地设置样式，避免样式的全局污染和冲突。缺点是它不支持所有 CSS 功能（如伪类、伪元素），且当样式复杂时，会使代码难以维护。而外部 CSS 文件则有利于样式的重用和分离，但可能会导致样式冲突，尤其是在大型应用中。