javascript - 使用类样式化 React 组件

Question

我们如何在 React 组件中定义 CSS 类，而不是在外部样式表中？我知道有一个名为 CSS 模块的概念可以解决全局样式表的问题。有没有其他方法通过在组件中定义类来设置组件样式？

Answer 1

非常简单，只需运行命令“npm run eject”，它会将 create-react-app 的配置文件和 dev/build/test 脚本移动到您的应用程序目录中。

现在转到配置文件夹并打开“webPackConfig.js”文件并添加以下代码

          use: getStyleLoaders({
              ....
              ....
            modules:true,
            getLocalIdent:getCSSModuleLocalIdent,
            localIdentName: '[name]_[local]_[hash:base64:5]'
          })

例子:

import React from 'xyz';
import Logo from '../../Logo/Logo';

import classes from './Toolbar.css';
import NavigationItems from '../NavigationItems/NavigationItems';
import DrawerToggle from '../SideDrawer/DrawerToggle/DrawerToggle';

const toolbar = (props) => (
    <header className={classes.Toolbar}>
        <DrawerToggle clicked={props.DrawerToggleClicked}/>
        <div className={classes.Logo}>
            <Logo />
        </div>
        <nav className={classes.DesktopOnly}>
            <NavigationItems />
        </nav>
    </header>
);
export default toolbar;

试试这个，你肯定能解决你的问题