用class样式化React Component

Question

How can we define CSS class within react component, not in external style sheet? I know there is a concept call CSS module which solve the issue of global style sheet. Is there any other way to style component by defining classes with in component?

Answer 1

it's very simple, just run command "npm run eject" It moves create-react-app's configuration files and dev/build/test scripts into you app directory.

now go to config folder and open 'webPackConfig.js' file and add the following code

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

example:

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;

try this and you can definitely solve your issue