<PageHeader className="site-page-header" title={title} subTitle={subTitle} {...(onBackClick !== undefined ? {onBack: () => { onBackClick() } } : {})} />
And
.site-page-header {
border: 1px solid rgb(235, 237, 240);
background-color: #253655;
}
How can I set the color of title (or any text) in this element to another color (from default black)? I tried to set every color related field I could find in .site-page-header but nothing seems to work.
Inspecting the elements to see why the color prop is not passed down to the title reveals that the class .ant-page-header-heading-title has a color prop which has higher specificity. Either add the !important to the color or increase specificity e.g.
.site-page-header .ant-page-header-heading-title {
color: blue;
}
Related
How can I change the background color, font color, and border color of this material-ui autocomplete textfield (combobox)? I would like to use css. this is what I have tried so far.
<Autocomplete
disablePortal
id="combo-box-demo"
options={clients}
className="test"
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
css class
.test {
.MuiAutocomplete-listbox {
color: red;
}
}
Since you would like to use css, you can change colors like this:
.test fieldset {
border-color: red;
}
.test .MuiInputBase-root:hover fieldset {
border-color: blue;
}
.test input {
color: red;
}
.test label {
color: red;
}
.test {
background-color: yellow;
}
You can take a look at this sandbox for a live working example.
I need to apply a custom style to the disabled the antd range picker.
I have added className to the component but the style isn't changing.
<RangePicker
className="my-range"
allowClear={false}
bordered={true}
format="HH:mm"
style={{ width: "100%" }}
/>
Styles Css: (need to change color of the text in the box)
.ant-picker-disabled.building-ophrs-range {
background-color: #ffffff;
.ant-picker-input.ant-picker-input-active {
color: #224cc0;
}
}
Codesandbox : https://codesandbox.io/s/basic-antd-4-20-7-forked-g5ee2t?file=/demo.js
try to write
.ant-picker-disabled.my-range {
background-color: #008000 !important;
}
Try this:
.ant-picker.my-range.ant-picker-disabled {
background-color: #008000;
}
I'm using Material UI Tabs in React to implement curved tabs (imagine like ones shown in Google Chrome). The structure must be such that the parent can give a bottom border which should stretch across the entire row making this bottom-border appear on tabs as well as on some other content on right. The selected (or active) tab, however, must remove the bottom border applied on it by its parent.
Expected Result:
Current Result:
The border from parent gets applied over the selected tab too, which is not what I want.
Here's the CodeSandbox link for my code.
Approach Taken:
I tried creating an ::after pseudo-element positioned absolute for selected tab with higher z-index. This pseudo-element creates a white-colored horizontal line and patches it over the bottom border applied by parent to overlap parent's border. However, I could not make it work. There were a couple of other CSS changes I applied; none seemed to move the parent's border. Any help to correct the existing approach I'm taking or suggesting a new approach to get the desired result is appreciated.
(Please note that I want to keep using Material UI Tabs as the base.)
On a side note, could anyone help why there's also some lag when selecting a tab?
Here is a way you can get your desired effect. Remove the parent bottom border, add a new css selector so you can give tabs that arent .MuiSelected a bottom border, then give the someother content div a bottom border so the grey line continues for the full length of the page (the grey is a slightly different shade cause of mui, but you could specifically set it to the right color):
https://codesandbox.io/s/curvy-tabs-using-material-ui-forked-lx57sw?file=/src/App.js
subtabs
import styled from "#emotion/styled";
import MuiTabs from "#material-ui/core/Tabs";
export const StyledSubTabs = styled(MuiTabs)`
.MuiButtonBase-root.MuiTab-root {
background: white;
border-radius: 8px 8px 0 0;
:hover {
background: pink;
}
}
.MuiButtonBase-root.MuiTab-root.Mui-selected {
border-top: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
border-bottom: none; /* not working */
z-index: 10;
:hover {
background-color: pink;
}
}
//
//added this
//
.MuiButtonBase-root.MuiTab-root {
border-bottom: 3px solid gray;
z-index: 10;
:hover {
background-color: pink;
}
}
.MuiTabs-indicator {
display: none;
}
`;
app.js
import React, { useState } from "react";
import Tab from "#material-ui/core/Tab";
import { StyledSubTabs } from "./SubTabs.styles";
const App = () => {
const [index, setIndex] = useState(0);
const handleChange = (event, newIndex) => {
console.log("SubTab - index", newIndex, event);
setIndex(newIndex);
};
const parentStyles = {
// remove this ----> borderBottom: "3px solid gray",
display: "flex",
justifyContent: "space-between",
alignItems: "center"
};
return (
<div style={parentStyles}>
<StyledSubTabs value={index} onChange={handleChange}>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
<Tab label="Tab 3" />
</StyledSubTabs>
<div
//added this
style={{
borderBottom: "3px solid gray",
height: 45,
flexGrow: 1
}}
>
Some Other Content
</div>
</div>
);
};
export default App;
I am new to css and i would like to know if css can be applied to the properties of tag?
For example in the below code i would like to see entry.count and "files" in blue color.
code
render() {
return(
<div className="AppL" id="AppList">
{this.createApplicationList()}
</div>);
}
createApplicationList() {
var guiResult = [];
for (var key in this.state.AppName) {
var entry = this.state.AppName[key];
guiResult.push(
<Collapsible trigger={entry.AppName + "\t" + "\t" + entry.Count + " files"} className="AppList" transitionTime ="10">
</Collapsible>);
};
return guiResult;
}
my scss for this component
.AppList{
color: black;
border-bottom: 1px solid #00a886;
padding-top:10px;
padding-bottom:10px;
}
.Collapsible .Collapsible__trigger {
color: blue;
}
.Collapsible selects all elements with the Collapsible class. Collapsible_trigger does the same for the Collapsible__trigger class. Together, the rule selects all .Collapsible__trigger elements within .Collapsible elements, and styles them with blue text.
This is based purely on your provided HTML code. The JavaScript appears to be irrelevant.
.Collapsible .Collapsible__trigger.is-closed also works and is more specific. Depends on your use-case.
According to this answer, web selection background colors are dependent on the operating system/browser combination. I would like to change the foreground color of ::selection, but not the background; however, it seems that changing the former causes the latter to become invisible.
//https://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin-to-highlighting-with-your-mouse
function selectText(node) {
node = document.getElementById(node);
if (document.body.createTextRange) {
const range = document.body.createTextRange();
range.moveToElementText(node);
range.select();
} else if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
}
}
#changed::selection {
color: red;
}
button,
p {
display: inline;
}
<button onclick="selectText('normal')">Select</button>
<p id="normal">This text maintains the standard highlight color, which I want to maintain.</p>
<br>
<button onclick="selectText('changed')">Select</button>
<p id="changed">When I try to change the foreground color of the selection, the background color is unset.</p>