Как внутри компонента создать css класс и применить его к элементу?

Question

[Владимир Голубь]

Как внутри React компонента создать CSS класс, а затем применить его в элементу.

Например, создаю класс .list и применяю его className={ list }, но чтобы название сохранилось без всяких хешей, как в aphoride.

Answer 1

[Антон Спирин]

<div className="list" />

const className = 'list';

return <div className={className} />;

Comments

[Владимир Голубь]

Немного, не про то вопрос. Нужно создать класс из объекта со стилями, а потом его применить. Как в aphoride, но без хешей.

[Антон Спирин]

Владимир Голубь, какого еще объекта со стилями? Ни нативный JavaScript, ни React не добавляют никаких хешей в ваши строки, чем значения, передаваемые в className и являются. Если используете какие-то сторонние инструменты, то указывайте их в вопросе или обращайтесь к медиумам, может они догадаются, что за инструменты вы используете и что именно добавляет вам в селекторы хеши =)

[Владимир Голубь]

Антон Спирин,
Есть объект, где описаны свойства.

{
  fontSize: fontsSizes.s,
  lineHeight: lineHeights.s
};

Хочу создать css класс внутри компонента с такими стилями.
Как это сделать ?

Мой вопрос - https://github.com/Khan/aphrodite/issues/377

[Антон Спирин]

Владимир Голубь, для чего вам создавать селектор без хешей в коде? Cуть этих библиотек в изоляции стилей, посредством генерации уникальных селекторов и отказе от селекторов в исходном коде.
Иначе проще было бы подключить css файл и не заморачиваться.

Вызов StyleSheet.create возвращает объект строк, а не объект стилей и className принимает простые строки, а не объекты. Надеюсь вы понимаете эту разницу.

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

[Владимир Голубь]

Антон Спирин,

у меня сейчас сделано так:

let stylesObj = {
  fontSize: fontsSizes.s,
  lineHeight: lineHeights.s
};

<p style={stylesObj}>Текст текст текст</p>

, а хочу создавать css класс из свойств внутри js и назначать его элементу.

[Антон Спирин]

Владимир Голубь, для чего вам создавать класс с конкретным именем в рантайме? Как вы собираетесь его использовать?
Не вижу кейсов применения подобным трюкам. Если важно имя, то создайте класс в css файле.

[Владимир Голубь]

Антон Спирин, есть файл с параметрами (размер шрифтов, цвета и так далее).
Хочу брать оттуда значения. Sass не предлагать. Поэтому единственный выход - это создание css внутри js.

[Владимир Голубь]

Антон Спирин, но по задания классы должны быть без hash'шей, а просто обычные (.block, .block__element). Серверный рендеринг не используется. Пока решение не могу найти.

[Владимир Голубь]

Антон Спирин, единственное решение, которое пока нашел - это создавать global стили в jss
https://codesandbox.io/s/v3058x3yl3

[Антон Спирин]

Владимир Голубь, правда не понимаю в чем проблема и с чем связаны ограничения. Почему вам нельзя использовать scss, но можно притянуть в проект левую библиотеку и использовать не по назначению? В чем идея?
Пример простого решения.

Answer 2

[alex kapustsin]

Очень помогает этот пакет classNames

Comments

[Владимир Голубь]

Нужно создать css класс внутри js, а отдельных css файлов у меня нет.