i want to override on specific component with parent reference, like search input text on datatable, right now i override the whole input to achive this
overrides:{
mycomponentselector: {
MuiPaper: {
MuiTabs: {
PrivateTabIndicator: {
root: {
backgroundColor: 'red'
}
}
}
}
}
}
this is one of the example where i want to remove underline on the input search datatable but i end up override the whole input
i am sorry for my bad explanation,
thanks in advance
Here is how you can select the component only if it's inside a parent component (in this example the parent component is Card)
overrides: {
MuiCard: {
root: {
"& .MuiInputBase-root:not(.Mui-disabled)": {
"&::before, &::after": {
borderBottom: "none !important"
}
}
}
}
}
Live Demo
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;
}
The code below is from MUI 5, with a MUI 4 solution for change input field when hovering. But it obviously doesn't work, wonder how to achieve this in MUI 5, can't
seem to change the color from the TextField upon hovering. This is done using createTheme in MUI 5
components: {
MuiInputLabel: {
styleOverrides: {
root: {
color: arcBlue,
fontSize: '1rem',
},
},
},
MuiInput: {
styleOverrides: {
underline: {
'&:before': {
borderBottom: `2px solid ${arcBlue}`,
},
// Code from material ui 4
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: `2px solid ${arcGrey}`,
},
},
},
},
},
The $ syntax is a feature from JSS, in MUI v5, they switch to emotion so it doesn't work anymore, you have 2 options now:
Use plain string
From this section, you can see a list of class names that describe different MUI component states:
State
Global class name
active
.Mui-active
checked
.Mui-checked
completed
.Mui-completed
disabled
.Mui-disabled
error
.Mui-error
expanded
.Mui-expanded
focus visible
.Mui-focusVisible
focused
.Mui-focused
required
.Mui-required
selected
.Mui-selected
'&&:hover:not(.Mui-disabled):not(.Mui-error):before': {
borderBottom: `5px solid purple`
}
Use constant
Most MUI components have their own class constants if you don't want to hardcode the class name:
import { [component]Classes } from "#mui/material/[Component]";
import { inputClasses } from "#mui/material/Input";
[`&&:hover:not(${inputClasses.disabled}):not(${inputClasses.focused}):before`]: {
borderBottom: `5px solid purple`
}
Reference
https://mui.com/guides/migration-v4/#migrate-themes-styleoverrides-to-emotion
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
}}
/>
What I am trying to achieve
I have two classes - root and button - I want to affect button class on root state (for example :hover).
My attempt
I'm trying to display button on root:hover.
const styles = {
root: {
'&:hover' {
// here I can style `.root:hover`
button: {
// and I've tried to affect `.root:hover .button` here
display: 'block'
}
}
},
button: {
display: 'none'
}
}
Expected ouput:
.element-root-35 .element-button-36:hover {
display: block;
}
Current output:
.element-root-35:hover {
button: [object Object];
}
Environment
I'm using Material-UI with React.js. In this situation I'm using withStyles() export.
Below is the correct syntax:
const styles = {
root: {
"&:hover $button": {
display: "block"
}
},
button: {
display: "none"
}
};
Related answers and documentation:
jss-plugin-nested documentation
Using material ui createStyles
Advanced styling in material-ui