Applying styles to <body>
#399
Replies: 5 comments 8 replies
-
|
What is your project setup? In something like Next, you can apply styles on body like any other component. If your |
Beta Was this translation helpful? Give feedback.
-
|
I am using react
…On Mon, 29 Jan, 2024, 11:52 pm Naman Goel, ***@***.***> wrote:
What is your project setup? In something like Next, you can apply styles
on body like any other component.
If your body element is not implemented within a component, you should
use a CSS file with traditional CSS resets.
—
Reply to this email directly, view it on GitHub
<#399 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AYUUZRYQYBDGTYE6CUX6MQTYQ7SHFAVCNFSM6AAAAABCP5BTKOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DEOBYGQZTC>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
That is not enough information. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @Sharathjonnala2003. In case you still need help, you can accomplish this by adding a @layer directive in your root css file. As @nmn mentioned, it would serve as a css 'reset'. Here's a practical implementation that would work in any React app framework.
@stylex stylesheet;
@layer base {
body {
margin: 0,
padding: 0,
}
}What this does, is it adds a CSS Layer which contains rules you want in the order you want them to take place. By having @layer base first, this will apply to all styles from that point forward. Other common layers may be: @layer theme {
/* your app or brand theme */
}
@layer utils {
/* common utility classes you want to reuse */
}Hope this helps! Happy coding :) |
Beta Was this translation helpful? Give feedback.
-
|
I don't have much experience with styleX so maybe I am missing something, but is the use of layers required here? I am able to apply styles to |
Beta Was this translation helpful? Give feedback.
-
|
@r11234 CSS layers are not required. You can configure the various bundler plugins to generate layers or not. If you opt-out of CSS Layers, we use CSS selector specificity bumping instead, which is a how lightningcss/postcss would polyfill layers. This means that in either case, you have to be a bit careful about the specificity of your styles.
|
Beta Was this translation helpful? Give feedback.
-
|
@addictionai The one thing to be careful about is that CSS Layers are order dependent so ensure that the StyleX styles are injected after your base styles. |
Beta Was this translation helpful? Give feedback.
-
|
Is it possible to set const styles = stylex.create({
html: {
'::selection': {
color: 'pink',
backgroundColor: 'black',
}
},
}); |
Beta Was this translation helpful? Give feedback.
-
|
This should work. Got more details or a repro for me? A minimal repro with no other styles might help see what CSS is generated. Was Update: I did a quick test to see what was happening and I see the correct CSS is generated and applied but the styling isn't taking effect. This might be an unrelated quirk of CSS, but let me see how to do this right. Update 2: Various HTML elements like This is probably why If, however, you're trying to override |
Beta Was this translation helpful? Give feedback.
-
|
Got it. Thanks for answer. |
Beta Was this translation helpful? Give feedback.
-
|
This means that it is impossible to use a color variable defined by StyleX, which isn't ideal from a design system point of view |
Beta Was this translation helpful? Give feedback.
-
|
One way around this is to assign a custom property to ::selection {
background-color: --selectionBg;
color: --selectionFg;
}And then set the value of these variables on the |
Beta Was this translation helpful? Give feedback.
-
|
We're looking into ways to allow usage of variables defined using |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I am unable to apply margin 0 to the entire body like in CSS. How to do that?
Beta Was this translation helpful? Give feedback.
All reactions