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

Question

Я использую модули 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
}

Answer 1

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

Вы должны использовать global вместо.

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

https://github.com/css-modules/css-modules

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

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

<div className={ styles.myComponent } >

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

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

Это чище!

Answer 2

Вот более короткая форма в чистом CSS (т.е. препроцессор не требуется):

      .my-component :global .external-ui-component {
   // ...
}

Answer 3

Вот более короткая форма:

      .my-component :global .external-ui-component {
   // ...
}

Answer 4

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

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

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

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