Стилизация компонента React с классом
Как мы можем определить класс CSS в компоненте React, а не во внешней таблице стилей? Я знаю, что есть модуль CSS вызова концепции, который решает проблему глобальной таблицы стилей. Есть ли другой способ стилизовать компонент, определив классы с помощью компонента?
нет, я знаю, что могу применить класс с className = "theclass". но я спрашиваю, могу ли я определить класс в компоненте
Так же вы можете определять стили как объекты и передавать их через свойство style. Но это ограничено подмножеством css. Решение, полностью поддерживающее все функции css, например, стилизованные компоненты.
Вы можете применить стиль напрямую, например. style = {style}const style = {backgroundColor: green}; Но лично я считаю, что это не идеально, я использую меньше, затем делаю что-то вроде .myclass-button { /*style here*/ }, а потом, конечно, делаю -> <div className = "myclass-button">...
В зависимости от конфигурации вашего веб-пакета вы можете импортировать файл CSS как import 'myfile.css'. Если вы используете приложение create-response-app, это выходит из коробки.
Возможный дубликат Как применить CSS и стили к компоненту React
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
it очень прост, просто запустите команду "npm run eject". Она перемещает файлы конфигурации create-response-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;
попробуйте это, и вы определенно сможете решить свою проблему
className = "theclass"?