How to override css of other components from App-CodePudding

I need to make fonts for some of my components bigger when my app is in full screen mode. In my App.jsx I have variable that triggers me adding "fullscreen" class to the root DIV of the whole app. I can go brute force and override it like * { font-szie: 18px; } but thats too simple. I want to override certain classes only (like .some-class * { font-size: 18px; }). Of course React hash stands in my way so here is question: how do I apply my font size to all components in the app?

CodePudding user response：

If you have hashed classes (i.e some-class-[hash]), you can use CSS selector to deal with it. Like this:

[class^="some-class-"]

The above CSS selector will select all classes which start with "some-class-". You can read more about CSS selectors here: https://www.w3schools.com/cssref/css_selectors.asp

CodePudding user response：

You can use General Classes like Bootstrap or Tailwind, then you should use it in your public folder and use linkcss`

<head>
    <link rel="stylesheet" href="..." />
</ head>

.text-sm {
    font-size: 1rem !important;
}

import hashed_classes from "./file.css";

const Component = () => {
    return (
        <div className={`${hashed_classes.class} text-sm`} />
    )
}