V2 css enhance

[cbbfcd]

just like this:

// the props
{
  style: {
     color: 'orange !important'
  }
}

according to this 👉setProperty

⚠️：value must not contain "!important" -- that should be set using the priority paramete

and i have a test:

// it's no use
someNode.style.color = 'orange !important'

So I think there should be a test about importance here.

[codecov-io]

Codecov Report

Merging #805 into V2 will decrease coverage by 0.38%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##               V2     #805      +/-   ##
==========================================
- Coverage   31.53%   31.14%   -0.39%     
==========================================
  Files           1        1              
  Lines         241      244       +3     
  Branches       73       74       +1     
==========================================
  Hits           76       76              
- Misses        111      113       +2     
- Partials       54       55       +1

Impacted Files	Coverage Δ
src/index.js	31.14% <0%> (-0.39%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e9d6757...5b42ee6. Read the comment docs.

[lukejacksonn]

Using important is usually a last resort.. is using important on inline styles ever advised? Or are you just going for complete/closeness to the spec?

[mrozbarry]

Is this necessary? Inline styles always take precedence unless a css style was already marked as !important elsewhere. Furthermore, like @lukejacksonn said, marking important styles is always a last resort, so maybe we shouldn't encourage it.

@cbbfcd Are you running into an issue where you can't use css and must flag the inline style as important?

Another thing to consider is that react has not put any stance on using !important either.

[frenzzy]

Have you tried to use cssText? Why don't you like it?

<div style={{ cssText: 'color:orange !important' }} />

Your approach will not work with styles in lowerCamelCase like this one:

<div style={{ fontSize: '32px !important' }} />

[cbbfcd]

@lukejacksonn

Sorry, I did some research. My idea is indeed wrong. Thank you for your correction.

[cbbfcd]

Have you tried to use cssText? Why don't you like it?

<div style={{ cssText: 'color:orange !important' }} />

Your approach will not work with styles in lowerCamelCase like this one:

<div style={{ fontSize: '32px !important' }} />

yep,

My idea is indeed wrong. thank u very much.

[cbbfcd]

Is this necessary? Inline styles always take precedence unless a css style was already marked as !important elsewhere. Furthermore, like @lukejacksonn said, marking important styles is always a last resort, so maybe we shouldn't encourage it.

@cbbfcd Are you running into an issue where you can't use css and must flag the inline style as important?

Another thing to consider is that react has not put any stance on using !important either.

My idea is indeed wrong. thank u very much

[jorgebucaran]

@cbbfcd Could you merge or remove your duplicate comments? Thanks.