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:

Import Semantic-ui css without the classes being scoped locally
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?

lmeikle · Accepted Answer · 2018-09-06 12:48:58Z

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

answered Sep 6, 2018 at 12:48

lmeikle

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LancerAce · Accepted Answer · 2019-07-30 09:45:57Z

0

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

edited Jul 30, 2019 at 9:45

answered Jul 30, 2019 at 8:55

LancerAce

745 bronze badges

Comments

Saahithyan Vigneswaran · Accepted Answer · 2020-03-04 17:07:25Z

0

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

answered Mar 4, 2020 at 17:07

Saahithyan Vigneswaran

7,1713 gold badges37 silver badges48 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related