Question 212591 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Avoid global css getting overridden in PROD – REACT-NEXT app

I’ve no clue how to fix this as am new to REACT-NEXT (am an Angular guy). Below is element that am utilizing from another resource like

import example-custom-ele-parent, {example-custom-ele-child} from 'custom-tags/example-custom'

    <example-custom-ele-parent> 
      <example-custom-ele-child></example-custom-ele-child>
    </example-custom-ele-parent>

when I see css for example-custom-ele-child in my localhost:3008 , in chrome browser, it is like

.cqAcqQ {
  padding: 0.25rem;
}

I want to add one rule so added in globals.css file, like

.cqAcqQ {
  padding: 0.25rem;
  margin: 2rem !important; // newly added by me
}

Everything was working in my localhost fine. But after i deployed, the changes i made overridden with new random class and its became

.kXIDVb {
  padding: 0.25rem;
}

Current package versions are

"next": "13.0.7",
"next-transpile-modules": "10.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",

I tried override by doing <example-custom-ele-child className={style['my-change']}></example-custom-ele-child> but getting error like className={style[‘my-change’] is not allowed

Could someone please guide me on this?

Thanks

Tags:

2

Answers


  1. 0

    Try to add styles like so:

    <el className="yourClassName" style={{ margin: "2rem" }}></el>

    But if u need to add something like font-size, in this case:

    <el className="yourClassName" style={{ fontSize: "2rem" }}></el>

    Hope it helps!

    Login or Signup to reply.
  2. 0

    First topic – class name change

    Answer: by the name of the class cqAcqQ I am suspecting this is a auto generated class which means with each build it will have a new name. In this case it changed to kXIDVb. Maybe you are using a third party component like material-ui or bootstrap. they seem to generate random classNames with each build. If you share the child element code I can confirm you.

    Second Topic – why adding className to component not working

    Answer: the reason is you are putting the className property to a custom component. If you want to add className like this

    <example-custom-ele-child className="test-classname" />

    you need to make sure in the definition of this component you are handling this prop. for ex.

    const ExampleCustomEleChild = ({ className }) => {
    // you can also put the className directly in this div or whatever html element you have
    return (
        <div className={className}>test div here</div>
    )
}

    Let me know if it helps or you can comment here with your questions.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search