0

I have a React component using Semantic-UI. I am trying to remove the width attribute. The inspector shows the element's CSS as below:

@media only screen and (min-width: 1200px)
.ui.container {
    width: 1127px;
    margin-left: auto!important;
    margin-right: auto!important;
}

I'd like to somehow remove the width. How can this be done? Do I have to use styled-components? If so, I'm a little confused as to how... Thanks!

Improve this question
4
  • how do you currently handle custom style for your components? if you are unsure, you can just use a custom stylesheet and increase specificity Commented Sep 27, 2020 at 1:38
  • Thanks for the response. I am using a css file and importing into the component. I am aware of specificity but I guess I dont have a grasp on it yet. I am running into trouble figuring where to add the ampersands && and if adding the styled-components module is necessary to do so. Commented Sep 27, 2020 at 2:41
  • 1
    you can use that CSS file and overwrite the styles there: .parent-class-name .ui.container { width: auto; } you don't need styled-components Commented Sep 27, 2020 at 2:45
  • 1
    you're welcome - have a look at my answer here: stackoverflow.com/a/64084064/8680805 for more insight Commented Sep 27, 2020 at 2:59
Related questions
0
Semantic UI for React
0
Semantic-ui - how to prevent semantic-ui css file from globally taking over other divs / parts of the page / app
4
Importing CSS in Semantic-UI-React
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.