Next.js Discord

Discord Forum

Why does element.style override my personal stylesheet?

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Hi there. The element statsPanel has styling that is overriden by element.style. Where does element.style come from and how do I control it?
Answered by Asiatic Lion
Sorry for the poor clarity.

I imported import { Html } from @/react-three/drei and wrapped <html><div style={{ ... , ... , etc. }}><Stats /></div></html>. The use of Html was necessary to avoid errors using the standard elements (i.e., div) in the JSX. Not sure why that is.

Anyhow, I took your advice with using inline styling by importing a stylesheet as a module so I could apply it to the className of my Stats component (since it doesn't have styles as a prop) and my code worked! I had to check the inspector to override any styling set by elements.style by using !important (see screenshot).

Thanks for your help!
View full answer

21 Replies

alfon
Inline Style will always override any external style
unless you set !important in your external style
It might be that the element.style comes from the packages itself
alfon
try to look if <StatsPanel /> have a style={{}} prop that you can override
Asiatic LionOP
Hey @alfon thanks for following up. I tried using inline styles for my Stats component, but it seems the drei library doesn't include styles as an inline prop for Stats.

I tried to include the Html component to wrap around my Stats to enable me to include a div I could wrap around Stats so I could apply inline styling to the div instead of Stats.

After checking my inspector console, it turns out the div exists, but the Stats component isn't nested inside it despite how I set it up in my code :/
alfon
Html component?
how is the code looked like in inspect element?
@alfon how is the code looked like in inspect element?
Asiatic LionOP
Sorry for the poor clarity.

I imported import { Html } from @/react-three/drei and wrapped <html><div style={{ ... , ... , etc. }}><Stats /></div></html>. The use of Html was necessary to avoid errors using the standard elements (i.e., div) in the JSX. Not sure why that is.

Anyhow, I took your advice with using inline styling by importing a stylesheet as a module so I could apply it to the className of my Stats component (since it doesn't have styles as a prop) and my code worked! I had to check the inspector to override any styling set by elements.style by using !important (see screenshot).

Thanks for your help!
Answer
alfon
Im glad you figured it out
importing a stylesheet is not inline styling...
its still an external CSS, fyi
@alfon importing a stylesheet is not inline styling...
Asiatic LionOP
I see, so if the className (as opposed to style) is set to the styles.statsPanel, how should I refer to it? I thought it was inline since we're applying styling within className like we would with Tailwind, Bootstrap, etc.
the className gets "scanned" by tailwind and the consequent .css is build/generated
with bootstrap, the .css is already there and you simply use the class names
<div style="background-color:black;">Hello</div>
this is what i meant by inline style
or this in react (jsx)
<div style={{backgroundColor: 'black'}}>
  Hello
</div>
@alfon thats not inline style
Asiatic LionOP
Thank you for taking the time to clarify! That makes more sense--inline is explicitly stating the style options in the 'styles' prop.

But stating the styling explicitly in "className" isn't inline styling?

Sorry if I'm asking basic questions like this, I just wanted to make sure I understand the terminology
alfon
Its okay, I just want you to understand for future reference.
Yes, styling explicitly in "className" isn't inline styling.
They are, in the developer's PoV, inline, and "feels" inline but in technicalities, the output styles that are produced are NOT inline