I am trying change color of the subheader component. It only changes if i write like this
<subheader style={color.disabled} >Middle Name : </subheader>
where
const color = {
disabled: {
color: grey500,
},
};
I am trying to change the subheader color when changing state. How can i do that?
Unless I'm misunderstanding the question, there doesn't seem to be any more to this than standard use of state:
changeSubheader() {
this.setState(
subheaderDisabledColor: {
disabled: {
color: red500,
},
};
);
};
<subheader style={this.state.subheaderDisabledColor}>Middle Name : </subheader>
https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly
Related
I'm trying to change background color of the cell in antD table using onCell property and onMouseOver function, but without success.
onCell: (record, rowIndex) => {
return {
onMouseOver: () => {
console.log("record, row", record, rowIndex);
return {
props: {
style: { background: "yellow", fontWeight: "bold" }
}
};
}
};
}
Working sandbox example:
demo
Any help would be highly appreciated.
If the goal is to add a custom background on hover to the cells of a certain column, perhaps a simple solution would be adding this as a custom class with onCell.
Forked demo with modification: codesandbox
onCell: (record, rowIndex) => {
return {
className: "custom",
};
};
In CSS, define :hover styles with a higher specificity so that it overrides default style for selected cells:
.ant-table-cell.ant-table-cell-row-hover.custom:hover {
background-color: hotpink;
color: white;
}
I was wondering if it was possible to have multiple connector colors with a different one at each step. So the first connector would be blue the one after that would be green then yellow then red all while keeping the previous color the same. The closest have gotten changes all previous colors to the same color. Is there a way to keep the previous the same color?
The Example I linked only has connectors of one color
Example of Stepper with Connector only one color
This answer shows how to change the color of individual StepIcons
Given that you have a function outside the component rendering the Stepper that returns an array containing the step labels and their corresponding icon color:
function getStepLabels() {
return [
{
label: "Select campaign settings",
color: "red"
},
{
label: "Create an ad group",
color: "blue"
},
{
label: "Create an ad",
color: "green"
}
];
}
you can generate classes for each label icon using material-ui's Hook API via the makeStyles function (if you are using a class component you might want to take a look at the withStyles function):
const useIconStyles = makeStyles(
(() => {
return getStepLabels().reduce((styles, step, index) => {
styles[index] = { color: `${step.color} !important` };
return styles;
}, {});
})()
);
and add the generated hook to your component: const iconClasses = useIconStyles();
When rendering the stepper you can make use of the generated classes like this:
[...]
<Step key={label} {...stepProps}>
<StepLabel
{...labelProps}
StepIconProps={{ classes: { root: iconClasses[index] } }}
>
{label}
</StepLabel>
</Step>
[...]
Here is a working example:
If you take a closer look at the render output of the Stepper component you will notice that StepLabel and StepConnector are sibling components. This means you can select a specific connector with the CSS :nth-child() pseudo-class. If you want to select the connector after the first step's label you would use the selector :nth-child(2). For the connector after second step's label it would be :nth-child(4).
If you have an array of step labels like this:
[
{
label: "First label",
connectorColor: "red"
},
{
label: "Second label",
connectorColor: "green"
},
{
label: "Third label"
}
];
you can pass this array to a material-ui style hook created by the makeStyles function and dynamically generate all the different CSS selectors necessary to style each connector:
const useConnectorStyles = makeStyles({
stepConnector: steps => {
const styles = {};
steps.forEach(({ connectorColor }, index) => {
if (index < steps.length - 1) {
styles[`&:nth-child(${2 * index + 2})`] = { color: connectorColor };
}
});
return styles;
},
stepConnectorLine: {
borderColor: "currentColor"
}
});
Now use the generated style hook in your component: const connectorClasses = useConnectorStyles(stepLabels); and provide the connector prop to the Stepper component:
connector={
<StepConnector
classes={{
root: connectorClasses.stepConnector,
line: connectorClasses.stepConnectorLine
}}
/>
}
Here is a working example:
Is it possible to set tick container's style backgroundColor and borderColor in Checkbox dynamically from JSX?
I can do it with CSS/LESS, but I need to set specific color based on data from API.
Example:
.
If the colors from API are completely unknown to you until the time of running, then there is no way to accomplish the task with Antd library. Because the class you need to update colors for (.ant-checkbox-checked .ant-checkbox-inner) is nested inside the parent component , and can be changed only in your .less file.
As you can see in Rafael's example, you can only control the colors of the parent (.ant-checkbox-wrapper) from .js file.
On the other hand, if you know there will always be, let's say "#1890FF", "#FA8072", and "#008100" colors, you just don't know in what order, you can easily change the colors dynamically, by creating your logic around CSS classes. Which means you can map through all your checkboxes and give the classNames based on the color you get from API (getColor function). In order to do so, in your .js file import the data from API and define getColor function:
import React, { PureComponent } from "react";
import { Checkbox } from "antd";
export default class ColoredCheckboxes extends PureComponent {
getColor = color => {
let checkboxClassName = "checkbox-green";
if (color === "#FA8072") {
checkboxClassName = "checkbox-orange"
}
if (color === "#1890FF") {
checkboxClassName = "checkbox-blue"
}
return checkboxClassName;
};
render() {
const dataFromAPI = [
{
key: "first",
name: "First",
color: "#008100",
},
{
key: "second",
name: "Second",
color: "#FA8072",
},
{
key: "third",
name: "Third",
color: "#1890FF",
},
]
return (
<div>
{dataFromAPI.map(item => (
<div key={item.key}>
<Checkbox className={this.getColor(item.color)}>
{item.name}
</Checkbox>
</div>
))}
</div>
);
}
}
Then in your .less file reassign the colors for ".ant-checkbox-checked .ant-checkbox-inner" class originally coming from Antd Library:
.checkbox-green {
.ant-checkbox-checked .ant-checkbox-inner {
background-color: #008100;
border-color: #008100;
}
}
.checkbox-orange {
.ant-checkbox-checked .ant-checkbox-inner {
background-color: #FA8072;
border-color: #FA8072;
}
}
.checkbox-blue {
.ant-checkbox-checked .ant-checkbox-inner {
background-color: #1890FF;
border-color: #1890FF;
}
}
You just styled it, something like
<Checkbox
style={{
backgroundColor: data.backgroundColor,
borderColor : data.borderColor
}}
/>
I have a form with a very awkward background color. Would like to change the color of the helper text of the Outlined TextField when it is in an error state but can't seem to override it. It persists the red.
See CodeSandBox .
For some reason, the error text color is generated under the following className: .MuiFormHelperText-root.Mui-error
So overriding error rule alone is not enough.
This will do the trick:
const helperTextStyles = makeStyles(theme => ({
root: {
margin: 4,
color:'black',
},
error: {
"&.MuiFormHelperText-root.Mui-error" :{
color: theme.palette.common.white,
},
},
}));
Code Sandbox
The problem is caused by CSS specificity (the base style has more specific classname, i.e. MuiFormHelperText-root.Mui-error than the overriding style class). It's recommended to use &$ syntax under this circumstance:
const helperTextStyles = makeStyles(theme => ({
root: {
margin: 4,
'&$error': {
color: 'white'
}
},
error: {} //<--this is required to make it work
}));
You can also refer to this section for an example and a bit more explanation.
It would be better to customize your Mui Theme as follows:
const Theme = {
components: {
MuiFormHelperText: {
styleOverrides: {
root: {
color: "red"
}
}
}
}
};
See https://mui.com/material-ui/customization/theming/ for more information.
i found one solution to change the color of text field.
<TextField
error
id="filled-error-helper-text"
label="Error"
defaultValue="Hello World"
helperText="Incorrect entry."
variant="filled"
/>
here you can see error which is Boolean, so you might be having validation like YUP, if you do then you pass it like this.
<TextField
error={!valid}
id="filled-error-helper-text"
label="Error"
defaultValue="Hello World"
helperText="Incorrect entry."
variant="filled" />
here i am changing color base on valid keyword.
I have a button that when clicked, all the content is transparent.
Is it possible to manually set the text color ? Not background color !
I want black color on my font not transparent.
My Code:
import React from 'react';
import DatePicker from "react-datepicker";
import Select from 'react-select';
import "react-datepicker/dist/react-datepicker.css";
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
class Test extends React.Component {
state = {
startDate: new Date(),
selectedOption: null,
}
constructor() {
super();
this.state = {
};
}
handleChange = date => {
this.setState({
startDate: date
});
};
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
};
render() {
const { selectedOption } = this.state;
return (
<div className="grid-container">
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
dateFormat="yyyy-MM-dd"
/>
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
</div>
);
}
}
export default Test;
I tried to manually adjust the colors through this link But without success !
I want the data to be in black letters on a white background when I click the button.
react-select is built in a way you should use CSS-in-JS and not css like describe here: https://react-select.com/styles.
Then you will be able to use some styling props like:
const customStyles = {
option: provided => ({
...provided,
color: 'black'
}),
control: provided => ({
...provided,
color: 'black'
}),
singleValue: provided => ({
...provided,
color: 'black'
})
}
And so on.
react-select v5.2.2 gives the following style keys which we can use to style different parts of UI using css
clearIndicator
container
control
dropdownIndicator
group
groupHeading
indicatorsContainer
indicatorSeparator
input
loadingIndicator
loadingMessage
menu
menuList
menuPortal
multiValue
multiValueLabel
multiValueRemove
noOptionsMessage
option
placeholder
singleValue
valueContainer
Now lets say you want to change the font color of selected option (see the img below)
now what you have to do is you need to find the right **style key** from above and
write a custom css function that's all.
you can use dev tools to inspect elements and easily find the style keys!
const customStyles = {
singleValue:(provided:any) => ({
...provided,
height:'100%',
color:'#08699B',
paddingTop:'3px',
}),
}
<ReactSelect
styles={customStyles}
/>
It took me some time to figure this out, hope it helps you and save your time to understand this.
You can find the class you want to target this way: in the browser element inspector find the element and find its class. You can that modify its class by adding:
.putElementClassNameHere {
color: black !important;
}
You might need !important for the style to be applied.