Почему стиль CSS-модулей не работает с моими элементами, RMWC?
Я новичок, чтобы реагировать, просто нужна помощь, чтобы понять действительно основные вещи. Я следую приведенному ниже руководству по реагированию на веб-компоненты материала и запутался. в главах о стиле и тематике.
https://jamesmfriedman.github.io/rmwc/styling-theming
В этой главе автор пытается объяснить различия между использованием стандартных CSS и CSS-модулей, но я не могу понять, в чем разница между ними. Почему мы используем модули css и чем они отличаются от стандартных css?
Я также пытаюсь применить css с помощью модулей CSS, но css не применяется к элементам. Я делаю что-то не так?
Мой код (стиль не применяется)
index.js
import React from 'react'
import ReactDom from 'react-dom'
import styles from './index.css'
import Button from '@material-ui/core/Button'
class App extends React.Component {
render() {
return (
<div>
<Button className = {styles.button}>
CSS Modules
</Button>
</div>
)
}
}
ReactDom.render(<App />, document.getElementById('root'))
index.css
.button {
background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
border-radius: 3px;
border: 0;
color: white;
height: 48px;
padding: 0 30px;
box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3);
}
Несмотря на то, что, делая это ниже, он работает нормально.
import React from 'react'
import ReactDom from 'react-dom'
import styles from './index.css'
import Button from '@material-ui/core/Button'
class App extends React.Component {
render() {
return (
<div>
<Button className = "button">
CSS Modules
</Button>
</div>
)
}
}
ReactDom.render(<App />, document.getElementById('root'))
@kenoClayton Я обновил вопрос, вы можете помочь сейчас?
ага, сейчас просматриваю
Вы случайно не используете Create-React-App?
да. Я использую приложение create-реагировать
Ответы 2
Если вы думаете о лучших практиках программирования, использование глобальной переменной — это плохо.
Потому что в конце концов вы столкнетесь с столкновением переменной. В худшем случае предупреждения нет, и вы просто сбиты с толку, когда значение переменной изменяется.
В css общий класс или любой селектор может помочь вам сэкономить время при написании css. но в конечном итоге вы столкнетесь с некоторой проблемой (особенно в кодовой базе среднего и большого размера), обнаружив, что элемент непреднамеренно стилизован классом или селектором, или вы хотите изменить стиль некоторого элемента, но это влияет на другой элемент, который вам не нужен.
Я предлагаю вам прочитать эту ссылку для более подробной информации.
https://css-tricks.com/css-modules-part-1-need/
в вашем случае вам нужно настроить плагин babel для использования модулей css в реакции
https://github.com/gajus/babel-plugin-реагировать-css-модули
если вы создаете проект с помощью приложения create-реагировать, вам следует посмотреть ответ @Keno Clayton
Ваш код в порядке, за исключением одной маленькой детали, которую вы могли упустить. Использование create-react-app позволяет вам использовать модули css, если вы следуете их руководящие принципы. Ваше имя файла должно быть index.module.css, чтобы он работал как модуль css.
Ссылка:
This project supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention.
Спасибо. Оно работало завораживающе. Но все же я не могу понять разницу между ними, используя простые таблицы стилей и модули css.
@Sagar Основное отличие состоит в том, что вы можете ссылаться на модули css более программным способом. На той же странице, на которую я дал ссылку, написано CSS Modules let you use the same CSS class name in different files without worrying about naming clashes..
но использование одинаковых имен классов в разных таблицах стилей также будет работать, я так думаю
@Sagar Нет, элемент с классом получит стиль разных таблиц стилей. если свойство одинаково в двух таблицах стилей, элемент получит стиль таблицы стилей, которая включена последней
@ Сагар Не совсем. Например, если у вас есть две таблицы стилей, которые вы хотите использовать в своем приложении, и у них есть конфликт в их именах, последняя импортируемая переопределит первую. Например. styles.css и styles2.css имеют класс .button. Второй превзойдет первый
Спасибо вам обоим, только у меня есть еще один вопрос, если вы не против,
@Sagar, ты можешь спросить, не нужно спрашивать разрешения
Автор объяснил примеры стилей CSS-модулей в ссылке Джеймсмфридман.github.io/rmwc/styling-theming, которая не работает для меня, если я не обновлю таблицу стилей из myDrawerHeader :global(.mdc-drawer__header-content) { color: red; } к простому myDrawerHeader. Почему это так?
@Sagar Во время компиляции он автоматически называет ваши стили css некоторыми уникальными идентификаторами, вот как он разрешает конфликты.
1. Вы можете найти подробные различия между стандартными CSS и модулями CSS с помощью быстрого поиска в Google, и 2. Вам нужно показать свой код, чтобы мы могли определить, почему ваши стили не работают.