Два класса для одного HTML-элемента реакции
Я чувствую, что здесь есть простой ответ, но я его не нахожу -
В заголовке моего ответа я импортирую свою таблицу стилей в разделе «стили» и поэтому ссылаюсь на классы css как
<div className = {styles.selectorname}>
Но я не могу понять с этой нотацией, как объявить несколько стилей для одного элемента. Пример, который не работает:
<div className = {styles.selectorname1} {styles.selectorname2}>
Любые идеи?
Нет, к сожалению
Вы не можете сделать это с классами. Вы должны использовать атрибут styles вместе с синтаксисом распространения, чтобы сделать это.
Ответы 3
Вы можете использовать оператор распространения для объединения различных объектов стиля. Для примера давайте посмотрим на этот файл css, в котором мало объявлений.
.myColor {
color: DodgerBlue;
}
.myFont {
font-family: Arial;
text-align: center;
}
Мы можем объединить их, используя следующий синтаксис.
<div style = {{...styles.myColor, ...styles.myFont}}>
Точно так же вы можете использовать следующий код для объединения этих стилей. Стили также могут быть из двух разных файлов.
<div style = {{...styles.selectorname1, ...styles.selectorname2}}>
Примечание. Используемый нами ... называется оператором спреда. Узнайте больше о синтаксисе распространения здесь.
Вы уверены, что использовали кавычки? Вроде таких как:
<div className = "{styles.selectorname1} {styles.selectorname2}">
Это не сработает. "{styles.selectorname1} {styles.selectorname2}" — это строка. Вы не встраиваете эти значения в строку. Чтобы внедрить значение, вы можете использовать строковый литерал.
В синтаксисе jsx фигурные скобки ({}) используются при предоставлении выражения или ссылки, а одинарные/двойные кавычки (" или ') используются при непосредственном указании строки. (см. этот ТАК ответ)
Амит, вы не можете использовать два класса CSS без кавычек в SGML и HTML. Вы должны разделить классы, если хотите объединить. w3.org/TR/REC-html40/intro/sgmltut.html#h-3.2.2
Если это имена классов, то вы можете использовать строки шаблона (``)
<div className = {`${styles.selectorname1} ${styles.selectorname2}`}>
className = {{styles. selectorname1, styles.selectorname2}}не работает?