在React中使用CSS来实现各种样式效果

1. CSS模块化

React提供了一种模块化的CSS解决方案，即CSS模块化。使用CSS模块化，每个组件可以有自己的CSS样式文件，样式规则只在组件内部有效，不会影响其他组件。

要使用CSS模块化，只需将CSS文件的扩展名从.css改为.module.css。然后，在组件中引入样式文件，并使用className属性来应用样式。例如：

import styles from './MyComponent.module.css';
function MyComponent() {
  return (
    <div className={styles.container}>
      <p className={styles.text}>Hello, World!</p>
    </div>
  );
}

在上面的例子中，styles.container和styles.text是通过CSS模块化生成的唯一类名，它们只在MyComponent组件内部有效。

2. 样式继承

在React中，可以使用组件的props来传递样式信息，并在子组件中应用这些样式。

首先，在父组件中定义样式：

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

function ParentComponent() {
  return (
    <div className={styles.container}>
      <ChildComponent className={styles.child} />
    </div>
  );
}

然后，在子组件中接收并应用样式：

import React from 'react';

function ChildComponent({ className }) {
  return <div className={className}>Hello, World!</div>;
}

在上面的例子中，ParentComponent的样式会被应用到ChildComponent中。

响应式设计

React和CSS可以很好地配合实现响应式设计。通过使用CSS媒体查询，可以根据设备的屏幕尺寸和方向应用不同的样式。在React中，可以使用window.matchMedia方法来监听媒体查询的变化，并在组件中动态地应用样式。

import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(max-width: 768px)');

    const handleMediaQueryChange = (event) => {
      setIsMobile(event.matches);
    };

    mediaQuery.addListener(handleMediaQueryChange);
    setIsMobile(mediaQuery.matches);

    return () => {
      mediaQuery.removeListener(handleMediaQueryChange);
    };
  }, []);

  return (
    <div className={isMobile ? styles.mobileContainer : styles.desktopContainer}>
      <p>Hello, World!</p>
    </div>
  );
}

在上面的例子中，根据屏幕的宽度，MyComponent会应用不同的容器样式。

CSS预处理器

CSS预处理器是一种扩展了CSS语法的工具，可以提供更强大和灵活的样式定义方式。在React中，可以使用诸如Sass、Less或Stylus等预处理器来编写CSS代码。

要使用CSS预处理器，首先需要安装相应的预处理器库。然后，在构建过程中将预处理器代码转换为普通的CSS代码。最后，在React组件中引入转换后的CSS文件即可。

React学习笔记2 | 青训营

在React中使用CSS来实现各种样式效果

1. CSS模块化

2. 样式继承