ReactJS — изменение свойств класса CSS

Как мы можем динамически изменять свойства класса CSS в ReactJS. Например, у меня есть несколько текстовых полей с именем класса CSS «важно». Я хочу, чтобы все они мигали красным фоном при нажатии кнопки.

Я думал, что смогу сделать это, изменив свойства этого класса CSS. Как изменить этот класс, чтобы все его текстовые поля с этим классом изменились мгновенно.

Или есть другой более элегантный способ сделать это?

Как правило, лучшим подходом является добавление/удаление классов модификаторов, а не динамическое изменение CSS. (И избегать !important, где это возможно, тоже хорошая цель)

DBS 17.05.2022 11:59

@DBS Спасибо, но как мне изменить все эти текстовые поля одновременно? Есть ли способ запросить/выбрать несколько элементов для обновления?

Vikas 17.05.2022 12:00

Если вы добавите код соответствующего компонента к вопросу, мы сможем ответить более подробно. Но передача дополнительного класса нескольким входным компонентам не должна быть слишком сложной, например. используя строку шаблона

DBS 17.05.2022 12:03
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
0
3
29
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

В вашем методе render() используйте переменную состояния, чтобы привязать различные классы к визуализируемому элементу в зависимости от его состояния.

О! Почему я не подумал об этом! Спасибо.

Vikas 17.05.2022 12:02

Нет проблем. Если вы пропустили этот замечательный урок: reactjs.org/docs/thinking-in-react.html ;)

agulowaty 17.05.2022 12:03

Вы можете сделать что-то вроде условной передачи классов в вашем className={""} prop.

Если состояние изменится, имя класса также будет изменено.

Это будет выглядеть примерно так:

className={state ? "important" : "yourDesiredClass"}

Другие вопросы по теме