使用类

Question

React组件样式

我们如何在react组件而不是外部样式表中定义css类。我知道有一个概念调用css模块，可以解决全局样式表的问题。还有什么其他方法可以通过使用in component定义类来对组件进行样式设置。

Answer 1

是的，模块可以是一种解决方案，您可以通过一种单独的方式定义组件的样式。但是您应该看一下经过预处理的CSS或CSS in JS和it's integration with React它可以为您提供帮助！

Answer 2

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

现在转到config文件夹并打开'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;

尝试一下，您绝对可以解决您的问题