CSS Модули - исключить класс из преобразования - PullRequest
Новая
       2

CSS Модули - исключить класс из преобразования

0 голосов
/ 01 октября 2018

Я использую модули CSS, и на сегодняшний день все работало замечательно.

Мы начали использовать внешнюю библиотеку пользовательского интерфейса вместе с нашей собственной, поэтому я пишу такие компоненты: 

<div className={styles['my-component']}>
   <ExternalUIComponent />
</div>

Предполагая, что ExternalUIComponent имеет свой собственный класс, который в конечном CSS-файле выглядит следующим образом external-ui-component, как я могу настроить стиль этого компонента из моего css файла?Приведенный ниже пример не работает: 

.my-component {
   font-size: 1em;
}

.my-component .external-ui-component {
   padding: 16px;
   // Some other styling adjustments here
}

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

Пожалуйста, не используйте встроенные стили, как кто-то другой предложил.Держитесь подальше от встроенных стилей настолько, насколько это возможно, потому что они могут вызвать ненужные повторные рендеринг.

Вместо этого вы должны использовать global.* Кроме того, я рекомендую использовать имена стилей в случае верблюда, что является предпочтительным способом для css-модулей.Таким образом, ваше имя класса будет: .myComponent { ... }

И вы можете использовать его в своем коде как 

<div className={ styles.myComponent } >

Если вы хотите добавить больше стилей, вы можете использовать синтаксис array.join(' '). 

<div className={ [ styles.myComponent, styles.anotherStyle ].join(' ') } >

Это чище!

0 голосов
/ 01 октября 2018

Вы пробовали встроенные стили для этого компонента?

https://reactjs.org/docs/dom-elements.html#style

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}
...