样式切换：从 CSS 模块到 React

2024-01-19 17:10:39

掌握现代 Web 开发中的样式切换

随着 Web 技术的不断发展，样式切换已成为构建美观、灵活且易于维护的 Web 应用程序的关键挑战。在本文中，我们将探讨三种流行的技术：CSS Modules、CSS 自定义属性和 React，它们共同赋予开发者处理样式切换的强大能力。

CSS 模块：告别样式冲突

传统 CSS 样式表的维护是一项艰巨的任务，很容易导致样式冲突。CSS Modules 通过将 CSS 类名作用域化到模块中解决了这一问题。这意味着不同的模块可以自由地使用相同的类名，而不会产生冲突。

示例：

// example.module.css
.container {
  padding: 1rem;
}

// App.js
import styles from './example.module.css';

function App() {
  return (
    <div className={styles.container}>
      Hello world!
    </div>
  );
}

CSS 自定义属性：可重用的样式变量

CSS 自定义属性，又称 CSS 变量，允许开发者在 CSS 中定义可重用的值。使用 -- 前缀，开发者可以创建自定义属性，并在整个样式表中使用它们。

示例：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

.button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

React：灵活的样式切换

React 是一个强大的 JavaScript 库，为样式切换提供了多种选项。开发者可以使用内联样式、CSS 模块或 CSS 自定义属性，具体选择取决于应用程序的特定需求。

内联样式：一次性解决方案

内联样式是直接将样式写入 React 组件的方法。这种方法适用于小组件或一次性样式。

示例：

const Button = () => {
  return <button style={{ backgroundColor: 'blue', color: 'white' }}>Button</button>;
};

CSS 模块：组件隔离

与内联样式不同，CSS 模块将样式封装到组件中。这消除了样式冲突的风险，并有助于保持代码的可维护性。

示例：

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

const Button = () => {
  return <button className={styles.button}>Button</button>;
};

CSS 自定义属性：全局样式控制

CSS 自定义属性允许开发者在 React 主题中创建和管理样式。通过使用 useTheme 钩子，开发者可以轻松访问自定义属性并将其应用到组件中。

示例：

import { useTheme } from 'styled-components';

const Button = () => {
  const theme = useTheme();

  return <button style={{ backgroundColor: theme.primaryColor, color: theme.secondaryColor }}>Button</button>;
};