Import Semantic-ui css without the classes being scoped locally || Semantic-ui to use classes that are being scoped locally

Question

I want to selectively use semantic-ui-css classes in my components. The problem is that I use PostCSS modules option which scopes locally all the class names for a specific component. When I use semantic-ui-react components, for example a button, it renders element button with classes ui button, but the included css gets scoped locally so instead of button i get button-min_ui__14RRq

I need to do one of two things:

1. Import Semantic-ui css without the classes being scoped locally
2. Make Semantic-ui components to use classes that are being scoped locally

For now I see that I have only one option:

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

I'm explicitly stating what classes the button is to use. It works, but I have to do that for every element and it keeps the default classes. So I get ui button button-min_ui__14RRq button-min_button__Uio9b

Is there a way of doing this without it keeping the default classes?

Answer 1

I'm not sure I fully understand the question, but will give it a shot. Should you try excluding the semantic/global styles from PostCSS? eg. If you are using webpack use 'exclude' in the loader definition. (it's something we do in one of our the projects where I work)

Laura

Answer 2

you are having similar problem to me.

Making External Library(Semantic ui React) and CSS module work with webpack css-loader

From my understanding,you want to exclude semantic-ui-react-library styling from css module so that it work with your application. You can create multiple rules for css loader to resolve this.

Take a look at this Using Semantic UI With CSS Modules in Webpack

Answer 3

I always use css of a library not the components they provide, I write my own.

So install only semantic-ui-css. Now import like below in your react application.

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

ReactDOM.render(<App/>, document.getElementById('root'))