Импортировать Semantic-ui css без локальной области видимости классов || Semantic-UI для использования классов, которые находятся в локальной области

Question

Я хочу выборочно использовать semantic-ui-css классы в моих компонентах. Проблема в том, что я использую опцию модулей PostCSS, которая локально определяет все имена классов для конкретного компонента. Когда я использую semantic-ui-react компоненты, например кнопку, он рендерит элемент button с классами ui button, но включенный CSS получает локальную область видимости, поэтому вместо button я получаю button-min_ui__14RRq

Мне нужно сделать одну из двух вещей:

1. Импорт Semantic-ui css без локальной области действия классов
2. Создание компонентов Semantic-ui для использования классов, находящихся в локальной области действия

Пока я вижу, что у меня есть только один вариант:

import React from 'react';
import { Button } from 'semantic-ui-react'
import semantic from 'semantic-ui-css/components/button.min.css'

export default class Test extends React.Component {
  render(){
    return (
        <Button className={[semantic.ui, semantic.button]}>Click Here</Button>
      )
  }
}

Я явно указываю, какие классы должна использовать кнопка. Это работает, но я должен сделать это для каждого элемента, и он сохраняет классы по умолчанию. Итак, я получаю ui button button-min_ui__14RRq button-min_button__Uio9b

Есть ли способ сделать это без сохранения классов по умолчанию?

Answer 1

у вас похожая проблема со мной.

Работа с внешней библиотекой (Semantic ui React) и модулем CSS для работы с веб-пакетом css-loader

Насколько я понимаю, вы хотите исключить стилизацию semantic-ui-реагировать-библиотеки из модуля css, чтобы она работала с вашим приложением. Вы можете создать несколько правил для загрузчика CSS, чтобы решить эту проблему.

Взгляните на это Использование семантического пользовательского интерфейса с модулями CSS в Webpack

Answer 2

Я не уверен, что полностью понимаю вопрос, но попробую. Стоит ли пытаться исключить семантические / глобальные стили из PostCSS? например. Если вы используете webpack, используйте «exclude» в определении загрузчика. (это то, что мы делаем в одном из наших проектов, где я работаю)

Laura