I am trying to change background color of entire header in antdesign. I am not sure but file with defaults should be this https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
I found out that color of header is used here so i changed it to red
Global.less
#import "./vars.less";
#layout-header-background: red;
But its override with another class
Now my question is what is best practice to achieve change of header color.
The background color of the <Header /> can be simply change using JSS or put a class on it:
<Header style={{backgroundColor: "red"}}>...</Header>
or
<Header className="red-header">...</Header>
and in css
.red-header{
background-color: red;
}
maybe what are you seeing is the color of the <Menu/> component. You can also modify the color of it using JSS or put a class on it:
<Menu style={{backgroundColor: "red"}} mode="horizontal">...</Menu>
see sample here
Related
I have a re-useable table component that I am styling with vanilla CSS. I have six possible colors that I would like users to be able to pick from to change the table header background color if wanted. Ideally, this color choice should be a prop on the component, but I'm not sure how to do this.
In my CSS file I have the color variables defined:
th {
--deq-primary: #0080b7;
--daq-primary: #1ab7da;
--ddw-primary: #147995;
--dwq-primary: #034a64;
--derr-primary: #05a68b;
--dwmrc-primary: #f26322;
}
th {
background-color: var(--deq-primary);
color: white;
border: 1px solid #cecece;
}
Is it possible to set a prop on my table to accept one of these values so that the header background color can be changes within the component?
Something like
<MyTable headerColor="ddw-primary" />
the the header color would change to the ddw-primary color
UPDATE
I was able to implement Hugo Elhaj-Lahsen suggestion. The variable name is being passed as a string and I updated the example he provided to account for the -- that is required in the variable name. So the final style tag in the code looks like
return <table style={{backgroundColor: `var(--${headerColor})` }}>
{// ...}
</table>
....
>
In the component I'm passing the var name as a string:
<MyTable
columns={columns}
data={data}
headerColor="my-color-variable-name"
/>
A possible React solution without libs would be to pass the CSS variable name as props, and reference it in the style of your component. Suppose we have:
<MyTable headerColor="ddw-primary" />
and your CSS variables defined in the MyTable component. Assuming you style via the style= property, you can do:
return <table style={{backgroundColor: `var(${headerColor})` }}>
{// ...}
</table>
i am trying add background color and change the icon color on prev icon and next icon on vuetify slide group prop. if i target the class which i got from console it's not working. but if i remove scoped from my style tag or try to change the color on console style it's working.
.v-slide-group__next.theme--light.v-icon
{
color: rgb(234, 10, 10)!important;
}
I have tried this way but it's not working.how can i style those props icon? thanks in advance.
In order to target the elements with class it's necessary to use <style> without 'scopped', because 'scopped' automatically adds unique hashes in the class selector on each app build. And this prevents targeting Vuetify's elements using this way. I would suggest you to add some class on your wrapper container, let's say class="my-slider" and to target it like this:
<template>
<div>
<v-slide-group class="my-slider">
</div>
</template>
<style>
.my-slider > .v-slide-group__next.theme--light.v-icon
{
color: rgb(234, 10, 10)!important;
}
</style>
I have been strying to override the default border color of outlined v-text-field. Basically I want a specific color all the times (unfocused, focused, hover) playing with the codepen below:
https://codepen.io/hoiratnhieu/pen/GRpjEeb
<v-text-field
label="Outlined"
outlined
dense
></v-text-field>
Can someone provide some much needed help here?
Thank you.
You could try using the following CSS:
.v-text-field--outlined fieldset {
color: red !important;
}
If you are using SASS variables, customize the light theme like this:
// Your custom main.scss
$material-light: (
'text-fields': (
'outlined': rgba(0,0,0, 0.19),
'outlined-hover': rgba(0,0,0, 0.38),
),
);
The focus color is simply the primary color. You can overwrite all variables in #vuetify/src/styles/settings/_light.scss like that.
Using Polymer v1.0
I can't find the proper css to add to change the color of the selected value text.
When I inspect the element, I can change the color value for:
.paper-input-container-0 .input-content.paper-input-container label, .paper-input-container-0 .input-content.paper-input-container .paper-input-label
to white, and the text changes. But if I add that to my CSS, nothing changes.
Use custom styles like this:
<style is="custom-style">
:host{
--primary-text-color: blue;
--paper-input-container-label: {
color:orange;
}
}
</style>
default custom style is: --primary-text-color
Example:
http://jsbin.com/fuzuri/edit?html,output
Newbie question, I'm working on a simple scenario: Changing the background color and the text of a giving element on my page using Tritium. My page looks like this:
<div class="hero" id="hero">
<div id="heroContentShort">
<div class="heroContentShort">
<h1 style="text-transform:capitalize;">My Text<span style="text-decoration:underline;font-weight:bold;">- on Moovweb</span></h1>
</div>
</div>
On my .TS file I have the following:
insert("div", class:"cus_title"){
insert("div", class:"cus_row1"){
move_here("//div[#id='hero']/div/div/h1")
attribute("background", "red")
text("My New Text")
}
}
The above is successfully changing the text, although is not preserving any format nor is changing the background color to red.
What I'm doing wrong?
Thanks
First and foremost, I highly recommend you not do the coloring in tritium. The DOM and the style should be separate. I would recommend you put this at the bottom of your main.scss file if you do not want to create your own page. Then you would do:
.cus_row1 {
background-color: red;
}
That would get the background color to work perfectly, and correctly.
However, if (for some reason) you HAD to do this in tritium, I would instead do this:
insert("div", class:"cus_title"){
insert("div", class:"cus_row1"){
move_here("//div[#id='hero']/div/div/h1")
attribute("style", "background-color: red")
text("My New Text")
}
}
The first reason, is that the background attribute is deprecated. Second, the user agent stylesheet can overwrite it. I hope this works for you!