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

Я хочу выборочно использовать классы 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

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


reactjs semantic-ui-react postcss rollupjs semantic-ui-css
person CodeBreaker    schedule 06.09.2018    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

Лаура

person lmeikle    schedule 06.09.2018

arrow_upward
0
arrow_downward

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

Создание внешней библиотеки (Semantic ui React) и CSS-модуль работают с webpack css-loader

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

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

person LancerAce    schedule 30.07.2019

arrow_upward
0
arrow_downward

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

Поэтому устанавливайте только semantic-ui-css. Теперь импортируйте, как показано ниже, в ваше приложение для реагирования.

import ReactDOM from 'react-dom'
import 'semantic-ui-css/semantic.min.css'
import App from './App'

ReactDOM.render(<App/>, document.getElementById('root'))
person Saahithyan Vigneswaran    schedule 04.03.2020