is it possible to add a :root style block with CSS variables to facilitate global styles in react? I've added the following to my layout.tsx page but i get a blank page when it's run (visual studio 2022 react project). if I add a meta tag instead of the style block the meta tag renders on the page so react-helmet is installed and working. I also get an error "(ts) cannot find name --mainThemeF" in visual studio when i hover over the style tag.
Is the layout.tsx the correct place to put this add global styles or is there a better page that may act as a "Master" type page? and Is this even the correct way to add global styles in react as i'm a bit new to it. Thanks.
<React.Fragment>
<Helmet>
<style type="text/css">
:root {
--mainThemeF: #ffffff;
--mainThemeB: #006633;
etc...
{
</style>
</Helmet>
Fixed it...boom. It was in the docs, why didn't i just read the docs
<React.Fragment>
<Helmet>
<style type="text/css">{`
:root {
--mainThemeF: #ffffff;
--mainThemeB: #006633;
{
`}</style>
</Helmet>
Related
I have a Vue component that needs to control the background color of the entire page dynamically. It has an internal state, and that state has the side-effect of causing the background of the page to change.
Ordinarily at the component level this would be accomplished by using v-bind in CSS:
<style lang="scss">
.some-class {
background-color: v-bind("some.variable");
}
</style>
This will work and the component's background will become the color defined in some.variable.
However, trying to use v-bind on :root (or anything outside of the component's scope) will fail. i.e.:
<style lang="scss">
html {
background-color: v-bind("some.variable");
}
</style>
… will not set the CSS property correctly. This is because the variable is declared at the component level. i.e.:
CSS:
html {
background-color: var(--something)
}
HTML:
<html>
<div style="--something">
</html>
What is therefore the "correct" or suggested practice? Do I manage it as a side-effect with watchers? Is there a flag to pass to v-bind?
The best practice really depends on what is your goal.
If you want to set the background for your app only (maybe not the entry document), you can put your code inside the App.vue component. Now your variable will take the root scope of your app and apply to any class that is inside the #app element.
If you have to set the background for the body or html element, you have no choice but to use a watcher. The code is something like that:
watch(someVariable, ()=>{
document.body.setProperty('--background-color', someVariable.value);
})
I'm trying to add a background-image to a view in vue vite. I don
't want to set this background-image on every view so I tried to add it inside the views site using a scoped css style.
But once I assign scoped to the style tag it won't use the style...
Example code which doesn't work:
<style lang="css" scoped>
body{
background: url("../../assets/images/background.jpg") !important;
}
</style>
Once I remove the scoped it would work but it would add the background to every view which shouldn't happen. Does anyone know why this happens?
From the docs
When a <style> has the scoped attribute, its CSS will apply to elements of the current component only.
This means thst only the elements in your <template> will get the style and since there is no <body> in your template, then it doesn't get style.
I wish to set some styling on the storybook canvas and docs at a global level. Could anyone suggest me a way out?
Thanks!
You can use the preview-header.html for that. Just add that file to your .storybook folder. Then add a style tag there, e.g.:
<style>
body {
font-size: 15px;
}
</style>
All it's contents are being injected to the Storybook preview Iframe, so you can add styles as well as other scripts and stuff.
https://storybook.js.org/docs/react/configure/theming#global-theming
Create manager-head.html file in .storybook directory and set your styles in
<style>
...
</style>
I'm using element-ui and I have some needs to edit fixed styles which isn't provided as options.
I tried to modify such things inside scoped-style-sheet and I found that some of those things are only able to be modified in not-scoped style-sheet. And then after I found that "/deep/" can do what I want.
so Here is my question
Can I use /deep/ to my Top-parent element in my vue page? Or are there
any problems it can cause?
<style lang="scss" scoped>
/deep/.wrapper {
.some-class{
/*and so on...*/
}
}
</style>
Using a child theme on my wordpress to update css.
Using the parameter:
.homepage .title {
color: ffffff;
}
There is an index css that seems to be interfering (index:58)? I can't seem to locate that line in any of my theme parent files. Is there something I am missing?
You have inline the css in the head of HTML. If you click on the (index:58) in developer tools it will show you the code that's applying the style.
Simply remove the .homepage .title { color: #000000} from the head of the html
Inlined CSS rule in the head of HTML