如何方便地在组件中解构导入的CSS模块？

要方便地在组件中解构导入的CSS模块，可以按照以下步骤进行：

1. 首先，在项目中安装classnames库，用来方便地拼接类名。

npm install classnames

2. 在组件中导入所需的CSS模块，并解构其中的类名。假设导入的CSS模块文件名为styles.module.css，其中包含了container、button两个类名。

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

3. 使用解构的方式，将所需的类名从styles对象中提取出来，并赋值给变量。

const { container, button } = styles;

4. 在组件的JSX代码中，使用解构后的类名变量，方便地应用到相应的元素上。

const MyComponent = () => {
  return (
    <div className={container}>
      <button className={button}>Click Me</button>
    </div>
  );
};

5. 如果需要在组件中动态地应用类名，可以使用classnames库来拼接类名。首先，导入classnames库。

import React from 'react';
import styles from './styles.module.css';
import classNames from 'classnames';

6. 在需要应用类名的元素上，使用classNames函数来拼接类名。可以传入一个对象，对象的属性名为类名，属性值为一个布尔值，表示类名是否应用。也可以传入多个字符串，分别表示要应用的类名。

const MyComponent = ({ isActive }) => {
  const containerClass = classNames(container, {
    [styles.active]: isActive,
  });

  return (
    <div className={containerClass}>
      <button className={button}>Click Me</button>
    </div>
  );
};

这样，就可以方便地在组件中解构导入的CSS模块，并应用到相应的元素上。如需动态应用类名，则可以使用classnames库来拼接类名。