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

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

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

<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
}

reactjs css css-modules
person Ancinek    schedule 01.10.2018    source источник

Ответы (3)


arrow_upward
12
arrow_downward

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

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

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

https://github.com/css-modules/css-modules#usage-with-preprocessors

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

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

<div className={ styles.myComponent } >

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

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

Это чище!

person xeiton    schedule 01.10.2018
comment
Спасибо, :global это то, что я искал, но документы мне были непонятны! Когда дело доходит до нескольких классов - я предпочитаю пакет classnames :) - person Ancinek; 01.10.2018
comment
Я предпочитаю использовать как можно меньше сторонних библиотек. Потому что больше библиотек увеличивает размер связанного файла и увеличивает зависимость проекта, что означает дополнительные потенциальные ошибки! Но делайте то, что вам удобно :) - person xeiton; 05.10.2018

arrow_upward
2
arrow_downward

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

.my-component :global .external-ui-component {
   // ...
}
person a darren    schedule 28.05.2021

arrow_upward
-2
arrow_downward

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

http://ReactjsDocs

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

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