98.css import wrapper component instead of applying to whole application

[Sean Smith]

I would love a React Component wrapper version of this. For my personal project I just want the 98.css applied to one portion of my program. However, the current implementation applies the css broadly to every component.

I propose something like:

import CSS98 from '98.css';

const Main = () => {
  return (
  <CSS98>
        <div>
           <h1>demo</h1>
        </div>
  </CSS98>
  )
}
export default Main;

[Adam C]

i second this, however i think using class names would be a neater implementation

[Chana]

This is a good idea for React projects, but it falls outside of the scope of this repo. By design, this project just outputs a CSS file with zero javascript. I'll close the issue as off-scope.

[Sean Smith]

Fair enough. Although I think it applies to any html project, i'm not sure of a way to use 98.css in an html/css/js without having it modify all html elements.

[Chana]

@seanwessmith

I imagine you could use something like SCSS and paste the entire CSS (which is not that much) into the scope of a parent selector, like

.my-98css-scope {
    /* The entire 98.css CSS goes here... */
}

and then

<section className="not-98">This is not touched by 98css</section>
<section className="my-98css-scope">This is!</section>

EDIT: also check this out