New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support !important for styles? #1881

Open
syranide opened this Issue Jul 19, 2014 · 48 comments

Comments

Projects
None yet
@syranide
Contributor

syranide commented Jul 19, 2014

We currently don't support !important as it has to be set using style.setProperty(name, value, priority). This should be trivially easy to implement if it's something want to support, although I'm not sure about the performance implications (EDIT: #1886), although I can't imagine it would be measurable as we would be doing the string test ourselves and those are cheap.

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

OK... apparently IE8 doesn't support this at all, it might still be worth implementing, for the future and for those who don't care about IE8. After further experimentation, apparently it is! style.setAttribute(name, value) (priority is part of the value). But apparently that was wrong as well, the only way to set it seems to be with cssText, an acceptable work-around may be to just use cssText when we detect an !important style, which should be seldom enough that performance is a non-issue.

An important consideration is that we already support this for the initial render, but subsequent updates will fail as !important isn't recognized for properties.

@AdamKyle

This comment has been minimized.

Show comment
Hide comment
@AdamKyle

AdamKyle Jul 19, 2014

!important is horribly abused in css, and if people write their css properly their is never a need for !important. That said I don't think it should be included, because then people can use "bad practices" in their apps and styles. Personally inline styling with react is bad enough.

AdamKyle commented Jul 19, 2014

!important is horribly abused in css, and if people write their css properly their is never a need for !important. That said I don't think it should be included, because then people can use "bad practices" in their apps and styles. Personally inline styling with react is bad enough.

@vjeux

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Aug 8, 2014

Contributor

On a random note, I thought that inline styles override !important but I was wrong ( http://jsfiddle.net/do0hpcvm/ ).

Contributor

vjeux commented Aug 8, 2014

On a random note, I thought that inline styles override !important but I was wrong ( http://jsfiddle.net/do0hpcvm/ ).

@zpao

This comment has been minimized.

Show comment
Hide comment
@zpao

zpao Aug 11, 2014

Member

@vjeux I'm going to leave this to you. I think we should probably just maintain status quo here and not support !important, but there may be valid uses somewhere.

Member

zpao commented Aug 11, 2014

@vjeux I'm going to leave this to you. I think we should probably just maintain status quo here and not support !important, but there may be valid uses somewhere.

@syranide

This comment has been minimized.

Show comment
Hide comment
@syranide

syranide Aug 11, 2014

Contributor

@zpao We do support it though, we just don't support updating a style that has it.

Contributor

syranide commented Aug 11, 2014

@zpao We do support it though, we just don't support updating a style that has it.

@zpao

This comment has been minimized.

Show comment
Hide comment
@zpao

zpao Aug 11, 2014

Member

That's not support, but I see what you mean (that's like saying we "support" hyphenated styles)

Member

zpao commented Aug 11, 2014

That's not support, but I see what you mean (that's like saying we "support" hyphenated styles)

@nelix

This comment has been minimized.

Show comment
Hide comment
@nelix

nelix Dec 14, 2014

Any word on the progress of this? I'm using react in a widget and a browser extension that work on third party sites and not being able to update !important styles is an issue for me

nelix commented Dec 14, 2014

Any word on the progress of this? I'm using react in a widget and a browser extension that work on third party sites and not being able to update !important styles is an issue for me

@cody

This comment has been minimized.

Show comment
Hide comment
@cody

cody Dec 15, 2014

Contributor

@nelix Maybe you can use something like this as a workaround:

var sheet = document.createElement('style');
document.body.appendChild(sheet);
sheet.innerHTML = 'html {font-size: 1em !important;}';
Contributor

cody commented Dec 15, 2014

@nelix Maybe you can use something like this as a workaround:

var sheet = document.createElement('style');
document.body.appendChild(sheet);
sheet.innerHTML = 'html {font-size: 1em !important;}';
@syranide

This comment has been minimized.

Show comment
Hide comment
@syranide

syranide Dec 15, 2014

Contributor

@cody It would probably be easier to just manually manage the style property of the node itself ;)

Contributor

syranide commented Dec 15, 2014

@cody It would probably be easier to just manually manage the style property of the node itself ;)

@ccnokes

This comment has been minimized.

Show comment
Hide comment
@ccnokes

ccnokes Jul 5, 2015

+1 to Nelix's comment. For example, in Bootstrap CSS there are a number of utility classes that all use !important (hidden, pull-right, etc) that I wouldn't be able to override without !important inline styles. (I totally agree that !important is abused--and probably Bootstrap too, for that matter--but I think React should still be able to work with them.)

ccnokes commented Jul 5, 2015

+1 to Nelix's comment. For example, in Bootstrap CSS there are a number of utility classes that all use !important (hidden, pull-right, etc) that I wouldn't be able to override without !important inline styles. (I totally agree that !important is abused--and probably Bootstrap too, for that matter--but I think React should still be able to work with them.)

@thomassuckow

This comment has been minimized.

Show comment
Hide comment
@thomassuckow

thomassuckow Aug 4, 2015

We use !important to set a dynamic background color on an element and have it still show up when printing. Without !important the background is not printed.

EDIT: Since I only needed ie9+, I used setProperty in componentDidMount & componentDidUpdate

thomassuckow commented Aug 4, 2015

We use !important to set a dynamic background color on an element and have it still show up when printing. Without !important the background is not printed.

EDIT: Since I only needed ie9+, I used setProperty in componentDidMount & componentDidUpdate

@probablyup

This comment has been minimized.

Show comment
Hide comment
@probablyup

probablyup Aug 4, 2015

Contributor

IMO, it should be supported. It's not React's place to be dogmatic about how people author their styles.

Contributor

probablyup commented Aug 4, 2015

IMO, it should be supported. It's not React's place to be dogmatic about how people author their styles.

@zpao

This comment has been minimized.

Show comment
Hide comment
@zpao

zpao Aug 4, 2015

Member

I had a longer post here and then lost it, oh well…

The summary is that it would be expensive to check every value for !important, so supporting this isn't awesome. Even if we do get a good option, it's unlikely we'd do this while we support IE8 because I don't want to go down that cssText path. This isn't really at all about dogma, I would say that it's more about perf. And the fact that we're faced with a number of limitations when working with styles in CSS.

What we could perhaps do is change the data structure for style.

style = {
  color: 'red',
  backgroundColor: {
    value: 'blue',
    important: 'true'
  }
}

It would be backwards compatible (if the value isn't an object, we do the exact same thing). And it would allow us to start using the setProperty API with important. Downside is obviously more objects. But we don't have to do any string parsing.

Member

zpao commented Aug 4, 2015

I had a longer post here and then lost it, oh well…

The summary is that it would be expensive to check every value for !important, so supporting this isn't awesome. Even if we do get a good option, it's unlikely we'd do this while we support IE8 because I don't want to go down that cssText path. This isn't really at all about dogma, I would say that it's more about perf. And the fact that we're faced with a number of limitations when working with styles in CSS.

What we could perhaps do is change the data structure for style.

style = {
  color: 'red',
  backgroundColor: {
    value: 'blue',
    important: 'true'
  }
}

It would be backwards compatible (if the value isn't an object, we do the exact same thing). And it would allow us to start using the setProperty API with important. Downside is obviously more objects. But we don't have to do any string parsing.

@probablyup

This comment has been minimized.

Show comment
Hide comment
@probablyup

probablyup Aug 4, 2015

Contributor

@zpao That seems reasonable. Perf is obviously a very important factor to consider and I appreciate the creative thinking... your solution would at least allow a developer to support the need, even if it's a little more effort.

Contributor

probablyup commented Aug 4, 2015

@zpao That seems reasonable. Perf is obviously a very important factor to consider and I appreciate the creative thinking... your solution would at least allow a developer to support the need, even if it's a little more effort.

@Charca

This comment has been minimized.

Show comment
Hide comment
@Charca

Charca Feb 19, 2016

Contributor

I'm facing the same issue as @nelix. It is quite an edge case, but it would be nice to have support for this.

Contributor

Charca commented Feb 19, 2016

I'm facing the same issue as @nelix. It is quite an edge case, but it would be nice to have support for this.

@nelix

This comment has been minimized.

Show comment
Hide comment
@nelix

nelix Feb 26, 2016

@zpao that api suites me fine, I will be really happy to rip out dynamically generated css + manual style manipulation I have from my chrome extension's IFrame armor.

nelix commented Feb 26, 2016

@zpao that api suites me fine, I will be really happy to rip out dynamically generated css + manual style manipulation I have from my chrome extension's IFrame armor.

@mwschall

This comment has been minimized.

Show comment
Hide comment
@mwschall

mwschall Mar 13, 2016

Ran into this today, trying to dynamically set the background color of a Semantic UI Icon. They have those colors set as !important, presumably for legitimate reasons. Fortunately I could work around it like @thomassuckow did. Would be nice to avoid the extra step though.

mwschall commented Mar 13, 2016

Ran into this today, trying to dynamically set the background color of a Semantic UI Icon. They have those colors set as !important, presumably for legitimate reasons. Fortunately I could work around it like @thomassuckow did. Would be nice to avoid the extra step though.

@6ewis

This comment has been minimized.

Show comment
Hide comment
@6ewis

6ewis Apr 15, 2016

what's the status on this?

6ewis commented Apr 15, 2016

what's the status on this?

@zpao

This comment has been minimized.

Show comment
Hide comment
@zpao

zpao Apr 15, 2016

Member

No change. As we invest more in JS styles I think we'll end up with some changes to how styles work. In the mean time I don't think we'll make any changes without a fuller picture of how that will play out.

Member

zpao commented Apr 15, 2016

No change. As we invest more in JS styles I think we'll end up with some changes to how styles work. In the mean time I don't think we'll make any changes without a fuller picture of how that will play out.

@japgolly

This comment has been minimized.

Show comment
Hide comment
@japgolly

japgolly Jun 15, 2016

This makes it pretty hard for React to play nice with Semantic UI (which frustratingly uses !important nearly everywhere).

japgolly commented Jun 15, 2016

This makes it pretty hard for React to play nice with Semantic UI (which frustratingly uses !important nearly everywhere).

@harmony7

This comment has been minimized.

Show comment
Hide comment
@harmony7

harmony7 Jul 22, 2016

For the record, since 15.x it no longer works even on initial render (since moving away from innerHTML). All rules with "!important" are now being thrown out.

harmony7 commented Jul 22, 2016

For the record, since 15.x it no longer works even on initial render (since moving away from innerHTML). All rules with "!important" are now being thrown out.

@syranide

This comment has been minimized.

Show comment
Hide comment
@syranide

syranide Jul 22, 2016

Contributor

For the record, since 15.x it no longer works even on initial render (since moving away from innerHTML). All rules with "!important" are now being thrown out.

For non-IE8 (which we actually don't actively care about anymore) this can technically be solved. EDIT: If that is something we want to look into.

Contributor

syranide commented Jul 22, 2016

For the record, since 15.x it no longer works even on initial render (since moving away from innerHTML). All rules with "!important" are now being thrown out.

For non-IE8 (which we actually don't actively care about anymore) this can technically be solved. EDIT: If that is something we want to look into.

@yanickrochon

This comment has been minimized.

Show comment
Hide comment
@yanickrochon

yanickrochon Aug 16, 2016

Over two years ago, and this is still debated? To me restricting it's use because of some subjective argument is just regressive. If it's mainly to prevent people to abuse it, well, it is quite idiotic as it's use is... important on many use cases. If it is part of the specification, then why not supporting it in React?

However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

yanickrochon commented Aug 16, 2016

Over two years ago, and this is still debated? To me restricting it's use because of some subjective argument is just regressive. If it's mainly to prevent people to abuse it, well, it is quite idiotic as it's use is... important on many use cases. If it is part of the specification, then why not supporting it in React?

However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

@toddself

This comment has been minimized.

Show comment
Hide comment
@toddself

toddself Oct 4, 2016

I literally just lost an hour debugging this. Given the amount of assistance react provides users when they do something unexpected (suggesting camel-case when using hyphenated class names, etc), i would have expected something in the console in this.

It would be awesome to be non-dogmatic and support people doing something unnecessary or at least warning about it.

toddself commented Oct 4, 2016

I literally just lost an hour debugging this. Given the amount of assistance react provides users when they do something unexpected (suggesting camel-case when using hyphenated class names, etc), i would have expected something in the console in this.

It would be awesome to be non-dogmatic and support people doing something unnecessary or at least warning about it.

@Venryx

This comment has been minimized.

Show comment
Hide comment
@Venryx

Venryx Oct 12, 2016

I'm having this issue as well.

The reason I need the " !important" override on an inline style is that my project is in a transition state, and still has CSS being applied using classes--one of which is using a css " !important" tag. (originally to override some JQueryUI css, I believe)

Having support for the tag would prevent me from having to use another css class (I'm trying to transition away from css classes), or modifying the old css class to no longer have the !important tag--which is a pain since it's used globally and would break other areas of the UI. (which are still using the old, JQuery rendering)

Venryx commented Oct 12, 2016

I'm having this issue as well.

The reason I need the " !important" override on an inline style is that my project is in a transition state, and still has CSS being applied using classes--one of which is using a css " !important" tag. (originally to override some JQueryUI css, I believe)

Having support for the tag would prevent me from having to use another css class (I'm trying to transition away from css classes), or modifying the old css class to no longer have the !important tag--which is a pain since it's used globally and would break other areas of the UI. (which are still using the old, JQuery rendering)

@brigand

This comment has been minimized.

Show comment
Hide comment
@brigand

brigand Oct 13, 2016

Contributor

For the moment, I wrote a library that should address this use case: brigand/react-with-important-style.

It uses this.element.style.setProperty to set the style with the important modifier.

Contributor

brigand commented Oct 13, 2016

For the moment, I wrote a library that should address this use case: brigand/react-with-important-style.

It uses this.element.style.setProperty to set the style with the important modifier.

@pmirandaarias

This comment has been minimized.

Show comment
Hide comment
@pmirandaarias

pmirandaarias Jan 10, 2017

Bad practice? sure, if you have coded from zero to all the entire page, what about to join a project with Symfony, UiKit, jQuery, etc, etc... that uses ReactJS too. What, I'll have to say to all the team "hey! bad practices, delete all the !important from the css please"

pmirandaarias commented Jan 10, 2017

Bad practice? sure, if you have coded from zero to all the entire page, what about to join a project with Symfony, UiKit, jQuery, etc, etc... that uses ReactJS too. What, I'll have to say to all the team "hey! bad practices, delete all the !important from the css please"

@sergiotapia

This comment has been minimized.

Show comment
Hide comment
@sergiotapia

sergiotapia Jan 20, 2017

I'm really surprised this has been overlooked for so long. Support for !important is absolutely needed for CSS. There are so many use cases for it.

sergiotapia commented Jan 20, 2017

I'm really surprised this has been overlooked for so long. Support for !important is absolutely needed for CSS. There are so many use cases for it.

@dagatsoin

This comment has been minimized.

Show comment
Hide comment
@dagatsoin

dagatsoin Jan 31, 2017

I am ok for best practice guideline.

But the majority of developper works on budget which leads to quick and dirty or in best case using bootstrap, foundation, uikit and co. which are still leader in the vanilla HTML/CSS integration habits. And they do use !important. It is not dirty, it is the css way for providing control on override in inheritance.

Also there is a lot of great projects which are driven by @vjeux famous presentation. And there are powerful: jss, glamor, styled-component, etc. Is still React responsibility to check CSS ?

dagatsoin commented Jan 31, 2017

I am ok for best practice guideline.

But the majority of developper works on budget which leads to quick and dirty or in best case using bootstrap, foundation, uikit and co. which are still leader in the vanilla HTML/CSS integration habits. And they do use !important. It is not dirty, it is the css way for providing control on override in inheritance.

Also there is a lot of great projects which are driven by @vjeux famous presentation. And there are powerful: jss, glamor, styled-component, etc. Is still React responsibility to check CSS ?

@ablankenship10

This comment has been minimized.

Show comment
Hide comment
@ablankenship10

ablankenship10 May 13, 2017

Just to add, I'm writing a 3rd party widget to be injected using React and I have to use the CSS library cleanslate which gives me my own DOM with completely reset CSS. This also means I HAVE to use !important on all of my styles. This is necessary for anyone making a widget because you can't trust the styles of the rest of the page. So despite "good practice" this is necessary.

ablankenship10 commented May 13, 2017

Just to add, I'm writing a 3rd party widget to be injected using React and I have to use the CSS library cleanslate which gives me my own DOM with completely reset CSS. This also means I HAVE to use !important on all of my styles. This is necessary for anyone making a widget because you can't trust the styles of the rest of the page. So despite "good practice" this is necessary.

@Tectract

This comment has been minimized.

Show comment
Hide comment
@Tectract

Tectract May 13, 2017

React css support seems a little behind the times on css support actually. It should properly support not only all features of the css standard, but also css 'modules'. There are some key issues with css that cannot be easily addressed by any means other than modules, namely global namespaces and code isolation. See here:

https://glenmaddern.com/articles/css-modules

On tool I used in some of my React-on-Rails projects is Rebass, which is a css module, for example:

https://github.com/jxnblk/rebass

but it seems to have only limited support. Works for a decent modal popup though...

Tectract commented May 13, 2017

React css support seems a little behind the times on css support actually. It should properly support not only all features of the css standard, but also css 'modules'. There are some key issues with css that cannot be easily addressed by any means other than modules, namely global namespaces and code isolation. See here:

https://glenmaddern.com/articles/css-modules

On tool I used in some of my React-on-Rails projects is Rebass, which is a css module, for example:

https://github.com/jxnblk/rebass

but it seems to have only limited support. Works for a decent modal popup though...

@brigand

This comment has been minimized.

Show comment
Hide comment
@brigand

brigand May 13, 2017

Contributor

@Tectract css modules are far outside the scope of React core. Also inline styles are as isolated as css modules.

Contributor

brigand commented May 13, 2017

@Tectract css modules are far outside the scope of React core. Also inline styles are as isolated as css modules.

@bootrino

This comment has been minimized.

Show comment
Hide comment
@bootrino

bootrino Nov 17, 2017

You can do anything you want with css in react if you use backticks in a style tag.

For example this is how to do important:

  render() {

    return (
        <div>
          <style>
            {`
              #colorBlackImportant {
                color: black  !important;
                font-size: 50px !important;
                }
            `}
          </style>
          <input
            type="text"
            className="form-control no-border-left"
            id="colorBlackImportant"
            name="navField"
            value={this.props.value}
            label="url"
            onChange={this.props.onChange}
            onKeyPress={(e) => {if(e.key === 'Enter') {this.props.onEnter()}}}
          />
        </div>
    )
  }

This also lets you do all that weird stuff like :hover and :focus

        <div style={{"padding": "6px"}}>
          <style>
            {`
                          .countConnections,
                          .countConnections:focus,
                          .countConnections.focus {
                            background-color: #f4a911;
                            color: white;
                            text-decoration: none;
                            }
                          .countConnections:hover,
                          .countConnections.hover {
                            color: #808080;
                            background-color: white;
                            }
                        `}
          </style>
          <a
            className="btn btn-md btn-block countConnections"
            type="primary"
            href={connectionsButtonURL}>
            {numberOfConnections} connection{(numberOfConnections === 1) ? null : 's'}
          </a>
        </div>

I know you've been missing the blink tag since they got rid of it. It's back in React:

              <style>
                {`
                  @keyframes blink {
                    from { opacity: 0.0; }
                    50% { opacity: 1.0; }
                    to { opacity: 0.0; }
                  }

                  blink{
                    animation: blink 20s infinite;
                    color: #FFD938;
                  }
              `}
              </style>
              <h3>
                Connection invitations received from {directionString}&nbsp;
                {(!!this.props.countInvitations) ?
                  <blink>
                    <i className='fa fa-bell' style={{'fontSize': '24px'}}/>
                    &nbsp;{this.props.countInvitations}
                  </blink> : null}

              </h3>

bootrino commented Nov 17, 2017

You can do anything you want with css in react if you use backticks in a style tag.

For example this is how to do important:

  render() {

    return (
        <div>
          <style>
            {`
              #colorBlackImportant {
                color: black  !important;
                font-size: 50px !important;
                }
            `}
          </style>
          <input
            type="text"
            className="form-control no-border-left"
            id="colorBlackImportant"
            name="navField"
            value={this.props.value}
            label="url"
            onChange={this.props.onChange}
            onKeyPress={(e) => {if(e.key === 'Enter') {this.props.onEnter()}}}
          />
        </div>
    )
  }

This also lets you do all that weird stuff like :hover and :focus

        <div style={{"padding": "6px"}}>
          <style>
            {`
                          .countConnections,
                          .countConnections:focus,
                          .countConnections.focus {
                            background-color: #f4a911;
                            color: white;
                            text-decoration: none;
                            }
                          .countConnections:hover,
                          .countConnections.hover {
                            color: #808080;
                            background-color: white;
                            }
                        `}
          </style>
          <a
            className="btn btn-md btn-block countConnections"
            type="primary"
            href={connectionsButtonURL}>
            {numberOfConnections} connection{(numberOfConnections === 1) ? null : 's'}
          </a>
        </div>

I know you've been missing the blink tag since they got rid of it. It's back in React:

              <style>
                {`
                  @keyframes blink {
                    from { opacity: 0.0; }
                    50% { opacity: 1.0; }
                    to { opacity: 0.0; }
                  }

                  blink{
                    animation: blink 20s infinite;
                    color: #FFD938;
                  }
              `}
              </style>
              <h3>
                Connection invitations received from {directionString}&nbsp;
                {(!!this.props.countInvitations) ?
                  <blink>
                    <i className='fa fa-bell' style={{'fontSize': '24px'}}/>
                    &nbsp;{this.props.countInvitations}
                  </blink> : null}

              </h3>

@singular1ty94

This comment has been minimized.

Show comment
Hide comment
@singular1ty94

singular1ty94 Dec 17, 2017

@bootrino's solution is still the best to date, coupled with React's fragment syntax you can embed styles side-along tags you need edited, and cobble together some kind of solution - particularly useful if you're fighting Semantic-UI which uses !important everywhere:

{myObjects.map((object, key) => {
    return (
        <Fragment key={key}>
            <style>
            {`
                #${object.uniq_id}_label {
                    background-color: ${colors[key]} !important;
                }
            `}
            </style>
            <Label
                size="large"
                color="teal"
                id={`${object.uniq_id}_label`}
            >
                {object.children}
            </Label>
        </Fragment>
    );
})}

singular1ty94 commented Dec 17, 2017

@bootrino's solution is still the best to date, coupled with React's fragment syntax you can embed styles side-along tags you need edited, and cobble together some kind of solution - particularly useful if you're fighting Semantic-UI which uses !important everywhere:

{myObjects.map((object, key) => {
    return (
        <Fragment key={key}>
            <style>
            {`
                #${object.uniq_id}_label {
                    background-color: ${colors[key]} !important;
                }
            `}
            </style>
            <Label
                size="large"
                color="teal"
                id={`${object.uniq_id}_label`}
            >
                {object.children}
            </Label>
        </Fragment>
    );
})}
@TimoSolo

This comment has been minimized.

Show comment
Hide comment
@TimoSolo

TimoSolo Jan 26, 2018

@singular1ty94 - Also trying to override SemanticUI - it may be semantic, but it's not great css :(

I ended up wrapping a div with the styles inside the offending element:

<Grid.Column>
          <div  style={{paddingTop:'4em'}}>
                ...
          </div>
</Grid.Column>

TimoSolo commented Jan 26, 2018

@singular1ty94 - Also trying to override SemanticUI - it may be semantic, but it's not great css :(

I ended up wrapping a div with the styles inside the offending element:

<Grid.Column>
          <div  style={{paddingTop:'4em'}}>
                ...
          </div>
</Grid.Column>
@singular1ty94

This comment has been minimized.

Show comment
Hide comment
@singular1ty94

singular1ty94 Jan 29, 2018

@TimoSolo An alternative solution to that method, which I've used lately, is to use styled-components to wrap Semantic UI's elements and then apply custom styling, eg:

import styled from 'styled-components';
import { Input } from 'react-semantic-ui';

export const StyledInput = styled(Input)`
    font-size: 12pt !important;
    ...
`

This way your JSX still looks relatively neat but you get the opportunity to apply actual CSS classes onto the Semantic elements rather than using additional elements or embedded CSS like my original solution.

singular1ty94 commented Jan 29, 2018

@TimoSolo An alternative solution to that method, which I've used lately, is to use styled-components to wrap Semantic UI's elements and then apply custom styling, eg:

import styled from 'styled-components';
import { Input } from 'react-semantic-ui';

export const StyledInput = styled(Input)`
    font-size: 12pt !important;
    ...
`

This way your JSX still looks relatively neat but you get the opportunity to apply actual CSS classes onto the Semantic elements rather than using additional elements or embedded CSS like my original solution.

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Feb 7, 2018

Contributor

I've bumped into this problem too. React Native for Web currently relies on !important for certain flex styles due to inconsistencies in how browsers expand the flex shorthand. Applying !important is fine when transforming styles to CSS via StyleSheet.create, but breaks when using inline styles due to this limitation in React DOM.

I'll make a PR to add a style warning when values include !important. And will look into ways to potentially support !important after that.

Contributor

necolas commented Feb 7, 2018

I've bumped into this problem too. React Native for Web currently relies on !important for certain flex styles due to inconsistencies in how browsers expand the flex shorthand. Applying !important is fine when transforming styles to CSS via StyleSheet.create, but breaks when using inline styles due to this limitation in React DOM.

I'll make a PR to add a style warning when values include !important. And will look into ways to potentially support !important after that.

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Jul 9, 2018

Why doesn't <pre style={{ fontFamily: 'monospace !important' }}> work? 😩

corysimmons commented Jul 9, 2018

Why doesn't <pre style={{ fontFamily: 'monospace !important' }}> work? 😩

@yagudaev

This comment has been minimized.

Show comment
Hide comment
@yagudaev

yagudaev Aug 16, 2018

I tend to agree that using !important is a sin. If we do not want to support this we should at least give a warning to the user

yagudaev commented Aug 16, 2018

I tend to agree that using !important is a sin. If we do not want to support this we should at least give a warning to the user

@Tectract

This comment has been minimized.

Show comment
Hide comment
@Tectract

Tectract Aug 17, 2018

I like using !important. It makes me feel like my code is important, lol.

Tectract commented Aug 17, 2018

I like using !important. It makes me feel like my code is important, lol.

@kelseyleftwich

This comment has been minimized.

Show comment
Hide comment
@kelseyleftwich

kelseyleftwich Aug 22, 2018

I'm trying to use !important so background colors will print when using Chrome. Maybe there is a better way but I haven't found it. ¯_(ツ)_/¯

kelseyleftwich commented Aug 22, 2018

I'm trying to use !important so background colors will print when using Chrome. Maybe there is a better way but I haven't found it. ¯_(ツ)_/¯

@brigand

This comment has been minimized.

Show comment
Hide comment
@brigand

brigand Aug 22, 2018

Contributor

If you don't want to load in a full css-in-js solution for this, here's a minimal implementation: codesandbox, gist.

The <style>put css here</style> technique breaks with certain input. Also, this would be a touch simpler if we just modified the wrapped element's .style DOM property (using the same set of APIs), but I'd rather target it with CSS, and allow it to do its own inline-style overrides of !important properties

Contributor

brigand commented Aug 22, 2018

If you don't want to load in a full css-in-js solution for this, here's a minimal implementation: codesandbox, gist.

The <style>put css here</style> technique breaks with certain input. Also, this would be a touch simpler if we just modified the wrapped element's .style DOM property (using the same set of APIs), but I'd rather target it with CSS, and allow it to do its own inline-style overrides of !important properties

@JoeDuncko

This comment has been minimized.

Show comment
Hide comment
@JoeDuncko

JoeDuncko Aug 26, 2018

Like others, I just ran into this while trying to build a react-powered widget to be used on third party sites. I, too, just spent a couple hours super confused because at one point styles would work, then as soon as I threw !important in there they disappeared. Very frustrating.

JoeDuncko commented Aug 26, 2018

Like others, I just ran into this while trying to build a react-powered widget to be used on third party sites. I, too, just spent a couple hours super confused because at one point styles would work, then as soon as I threw !important in there they disappeared. Very frustrating.

@steodor

This comment has been minimized.

Show comment
Hide comment
@steodor

steodor Sep 28, 2018

Having lost quite some time on this myself today, i'd like to reiterate what @probablyup said back in 2015: "It's not React's place to be dogmatic about how people author their styles." - it's simple specs, i don't see one valid reason for not fully supporting it.

steodor commented Sep 28, 2018

Having lost quite some time on this myself today, i'd like to reiterate what @probablyup said back in 2015: "It's not React's place to be dogmatic about how people author their styles." - it's simple specs, i don't see one valid reason for not fully supporting it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment