Using Isolate in react-jss

[HardeepAsrani]

I'm trying to use isolate with react-jss, but there's no docs. I'm currently trying like this:

const useStyles = createUseStyles({
    mark: props => ({
        isolate: true,
        color: [ [ props.headingColor ], '!important' ],
        fontFamily: [ [ props.fontFamily ], '!important' ],
        '& mark': {
            color: props.highlightColor,
            background: props.highlightBackground
        }
    })
});

Any ideas?

[nico-w]

Hi, I think you're using it wrong.

According to some documentation it's called isolation, not isolate.

See also: https://www.w3schools.com/cssref/css3_pr_isolation.asp or https://developer.mozilla.org/en-US/docs/Web/CSS/isolation

See this CodeSandbox: https://codesandbox.io/s/recursing-dawn-gujdn

Hope I was able to help you!

[HardeepAsrani]

Hey @nico-w! Sorry for the delay, got busy in other stuff.

No, I'm talking about isolate https://cssinjs.org/jss-plugin-isolate

[airtonix]

I don't even think this plugin works (or has no appreciable result)

It's hard to say without examples of jss > css before/after

[kof]

this plugin is no part of https://cssinjs.org/jss-preset-default which is used by react-jss, so you would need to add it to your setup, another thing is jss-plugin-isolate wasn't updated to work with function rules and function values, so you probably run into problems

[kof]

Things I see can be done here is:

• [ ] Improve documentation
  • for using isolation react-jss
  • add note that this is not CSS isolation property
• [ ] Make it work with function values and funciton rules

If anyone is up for it I will provide guidance in the PR.

[Stas-Buzunko]

spending more than hour on how to set everything up - i've found an example https://codesandbox.io/s/yp46yklvyx

Note: import should be "jss-plugin-isolate" not "jss-isolate";