I would like to change text color (which is actually a SVG Icon) in Material UI StepIcon only for active and completed steps. At the moment, I successfully changed color of an icon for those steps. That's how my MuiTheme looks like now.
export default createMuiTheme({
overrides: {
MuiStepIcon: {
root: {
'&$active': {
color: styles.myGreen,
},
'&$completed': {
color: styles.myGreen,
},
},
}
},
});
And whole stepper looks like:
Assumings, I would like to change color of tick to gray (which represents completed steps) and color of number two to gray as well (which represents currently active step), while keeping inactive step not changed (white fill).
Changing fill property for text like in official documentation does not give any results, in developer inspector still shows fill equal white.
I want to apply that styling for whole app.
Any tips or solution for this one?
you need to override the text class too
export default createMuiTheme({
overrides: {
MuiStepIcon: {
root: {
'&$active': {
color: styles.myGreen,
},
'&$completed': {
color: styles.myGreen,
},
},
text: {
fill: <YOUR_DESIRED_COLOR>
},
},
}
},
});
Related
i am using Fluent UI in my project.
I initializing my button with this simple code in javascript:
iconProps: {
iconName: 'NewFolder',
styles: {
root: {
color: 'orange'
},
}
},
and i can override default color to asked one.
My question is, how to set mouse hover color over button?
https://learn.microsoft.com/en-us/javascript/api/react/iiconprops?view=office-ui-fabric-react-latest##fluentui-react-iiconprops-styles-member
For IconButton, DefaultButton and PrimaryButton you have property root for default button style, rootHovered, rootChecked etc. for different states.
<IconButton
iconProps={{ iconName: 'NewFolder' }}
styles={{
root: { color: 'blue' },
rootHovered: { color: 'orange' },
}}
/>
Codepen working example
Button styles also might help.
I would like to configure some colors in my theme, which are used by some categories in my application.
So I've setup a theme and use this in my component.
theme.tsx
import { createTheme, Theme } from '#mui/material/styles'
import { red } from '#mui/material/colors'
export const theme: Theme = createTheme({
palette: {
primary: {
main: blue[800]
},
secondary: {
main: '#19857b'
},
cat1: {
main: red[700]
}
}
})
circle.tsx
import CircleIcon from '#mui/icons-material/FiberManualRecord'
import {theme} from '/shared/theme'
export function Circle() {
return (
<>
<CircleIcon style={{ color: theme.palette.cat1.main }} />
<CircleIcon style={{ color: theme.palette.cat1[200] }} />
</>
)
}
What I try to achieve is to set the color of some elements in a dynamic way. So the Circle in category 1 will get the color red. All colors which are needed are imported in the theme. I don't want to import all possible colors in the component itself.
But I also want to calculate the color of another element based on this. In the example above I would like to get 200 of red.
First off, don't use styles, it's harder to override and MUI has better alternatives (sx prop/styled function) which provide the theme object for you when passing as a callback, so change your code to:
<CircleIcon sx={{ color: theme => theme.palette.cat1.main }} />
Secondly, if you want to access other variants of the color like what you can with primary or secondary, use augmentColor() function to tell MUI generate the dark/light/contrastText colors automatically for you:
import {
createTheme,
ThemeProvider,
Theme,
lighten,
darken
} from "#mui/material/styles";
const { palette } = createTheme();
const { augmentColor } = palette;
createTheme({
palette: {
// this will tell MUI to calculate the main, dark, light and contrastText
// variants based on the red[500], and then merge the new properties with
// the color object itself. The end result will be something like:
// cat1: { '100': ..., '900': ..., light: ..., dark: ..., contrastText: ... }
cat1: augmentColor({ color: red }),
// this will tell MUI to calculate the main, dark, light and contrastText
// variants based on the red[100], no other shades are passed unlike the above.
cat2: augmentColor({ color: { main: red[100] } })
// light and dark variants are generated in augmentColor using lighten() and
// darken() function, if you want even more control, override the light and
// dark properties yourself like this:
cat3: augmentColor({
color: {
dark: darken(red[300], 0.6),
main: red[300],
light: lighten(red[300], 0.6)
}
})
}
})
Live Demo
I'm trying to override the global style for the Mui TextField components that are disabled, but I can't get the border color to change.
I've managed to change the label color if the field is disabled, but not the border color. Here is what I have so far:
export const theme = createMuiTheme({
overrides: {
// For label
MuiInputLabel: {
root: {
'&$disabled': {
color: '#000000',
},
},
},
// For border color of field (doesn't work)
MuiTextField: {
root: {
'&$disabled': {
borderColor: '#FFFFFF'
},
},
},
},
});
I've tried all kinds of variations, including,
MuiOutlinedInput: {
root: {
fieldset: {
borderColor: '#FFFFFF',
},
}
}
But this only changes the border color of non-disabled fields. What am I doing wrong here?
Here is how it looks:
The border is getting from the fieldset element. You can style if based on your needs:
MuiInputBase: {
root: {
"&$disabled": {
'& fieldset.MuiOutlinedInput-notchedOutline': {
borderColor: "blue",
background: "grey"
}
}
}
}
You can find a working example here: https://codesandbox.io/s/material-styling-disabled-textfield-ckp14?file=/demo.js
Here is a "walkthrough" for how to do it yourself:
Check the html output:
Open the image in new tab to check the marks.
As you can see - the label is actually not a parent of the fieldset tag, which is the one that draws the border.
The fieldset is inside the div.MuiInputBase, which is also disabled, so I had to add the &$disabled on the root of the MuiInputBase.
As for the & fieldset - the fieldset element is a child-element fo the MuiInputBase - so the space between the & and the tag-name means this is a child-element.
The fieldset element has the MuiOutlinedInput-notchedOutline so I used it as the relevant selector. You could probably just use .MuiOutlinedInput-root.Mui-disabled fieldset without the last-selector. Try it :-).
I have the following jsx code (react-semantic-ui) in render method:
{!this.props.loading &&
<ControlRow>
<Grid.Column width={5}>
<Dropdown
multiple
fluid
selection
options={myOptions}
onChange={this.navigateToMyFunc}
/>
...
...
And I am using styled-components to style my elements:
https://github.com/styled-components/styled-components
Unfortunately the only working styling for the Dropdown due to some weird specifics of the environment is indirect from ControlRow:
const ControlsRow = styled(Grid.Row)`
.ui.multiple.dropdown > .label {
color: white !important;
background-color: #2185d0;
}
`
See also the following thread: Dropdown in semantic ui can't be made of multiple selection type when wrapped with styled-components
Now the Dropdown as you can see is of type multiple. Each selected item should be colored according to the specified in the myOptions options. I can pass myOptions to the ControlRow which will make the array to be accessible in it, but I am not sure how to write the styled-components part of it:
.ui.multiple.dropdown > .label {
color: white !important;
background-color: ${props => props.myOptions..??};
}
I need to also know which item it is to select correct myOptions color. Here is how it looks:
Right now it is just always blue, but I need it to be colored according to each option.
Update
Seems like it is an absent feature in semantic-ui-react - coloring by hex - codes (only a few regular color names allowed) - so I posted this feature to their github:
https://github.com/Semantic-Org/Semantic-UI-React/issues/3889
by default semantic-ui supports selected list of colors. If you need custom label color, you can add your custom css classes and apply the class name to the label.
const getOptions = (myOptions : string[]) => {
return myOptions.map((myValue : string) =>({
key: myValue,
text: myValue,
value: myValue,
label: { className: setColorClass(myValue), empty: true, circular: true }
}))
}
function setColorClass(optValue) {
if (optValue === '1') return 'light-green';
else if (optValue === '2') return 'sandy-brown';
else return 'light-coral';
}
in your css class you can have the following classes
.ui.label.light-green {
background-color: lightgreen !important;
}
.ui.label.sandy-brown {
background-color: lightgreen !important;
}
.ui.label.light-coral {
background-color: lightgreen !important;
}
Also if you want to apply label circular color when the value is selected, you can do the following, write a renderLabel function in your react class and apply it in the compnent
function renderLabel(label:any){
return {
content: `${label.text}`,
className: setColorClass(label.text)
}
}
Sample component
<Dropdown
search
selection
closeOnChange
value={myValue}
options={getOptions(myOptions)}
placeholder='Choose from here'
onChange={handleDropdownChange}
renderLabel={renderLabel}
/>
You don't need to use CSS styling for this. And nothing related to Styled Components needs to be done.
SemanticUI lets you use a custom render function for labels.
You would use it like this:
const renderLabel = (option) => ({
color: option.color,
content: option.text,
})
const myOptions = [
{ text: "option one", color: "blue" },
{ text: "option two", color: "red" },
// more options...
]
// ...
<Dropdown
multiple
fluid
selection
options={myOptions}
onChange={this.navigateToMyFunc}
renderLabel={renderLabel} // here
/>
This assumes that your option objects have a color property and a text property. You'll need to adjust to the shape of your option objects.
Also, the color property will need to be one of the available label colors in SemanticUI:
const colors = [
'red',
'orange',
'yellow',
'olive',
'green',
'teal',
'blue',
'violet',
'purple',
'pink',
'brown',
'grey',
'black',
]
What I'm trying to do:
I am trying to provide the user the option to provide custom styling to my EnhancedTable component by passing in a styles object containing properties such as headCellColor, headCellBackgroundColor, bodyCellColor, bodyCellBackgroundColor etc which can be used to color the cells in TableHead and TableBody.
In the TableHead component, I use a TableSortLabel in a way similar to what they've done in this material-ui docs example: https://material-ui.com/components/tables/#sorting-amp-selecting
I wish to custom color the text and the arrow icons on hover and when active based on the props provided by the user.
Let's see the colors of TableSortLabel in different situations:
The color of the text is grey initially and there is no arrow. When mouse is hovered over it, a grey arrow appears and the text turns black. On clicking it, active state is set, the grey arrow turns black and the text turns black permanently until active state is removed.
What I've tried so far:
const useStyles = makeStyles({
tableSortLabel: props => ({
backgroundColor: "blue",
color: props.headCellColor,
fill: props.headCellColor,
"&:hover": {
backgroundColor: "blue"
}
})
});
function EnhancedTableHeadCell(props) {
const { isActive, onHoverSortState, clickHandler, ...otherProps } = props;
const classes = useStyles(props.styles);
return (
<FancyTableCell styles={props.styles} {...otherProps}>
<TableSortLabel
active={isActive}
classes={{
icon: classes.tableSortLabel,
active: classes.tableSortLabel
}}
direction={onHoverSortState}
onClick={clickHandler}
>
{props.children}
</TableSortLabel>
</FancyTableCell>
);
}
This is what it looks like in the browser:
https://i.postimg.cc/fW7W2MRB/c1.jpg
The first one is a normal header, the second is on hover and the third is when clicked (active state).
From what we can observe, the text color is totally unaffected by the color css property in all the three cases (normal, hover, active). On hover, backgroundColor only affects the icon and not the text. However, we can see that backgroundColor affects the text when it is active. Everything is going as expected with the icon. The only issue is with the text.
What could I be possible doing wrong? How can I solve my problem?
What worked for me is:
const StyledTableSortLabel = withStyles((theme: Theme) =>
createStyles({
root: {
color: 'white',
"&:hover": {
color: 'white',
},
'&$active': {
color: 'white',
},
},
active: {},
icon: {
color: 'inherit !important'
},
})
)(TableSortLabel);
You can reference the following for increasing css specificity:
https://material-ui.com/customization/components/#pseudo-classes
Solution for your problem is following:
MuiTableSortLabel: {
root: {
color: textPrimary,
// if you want to have icons visible permanently
// '& $icon': {
// opacity: 1,
// color: primaryMain
// },
"&:hover": {
color: primaryMain,
'&& $icon': {
opacity: 1,
color: primaryMain
},
},
"&$active": {
color: primaryMain,
// && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
'&& $icon': {
opacity: 1,
color: primaryMain
},
},
},
}
This restyling I use globally via my ThemeProvider, but you can of course use it individually in your single component by using "withStyles" HOC (see "BootstrapButton" in example)
I could'nt find a proper way to do it so I came up with a temporary solution overriding the material ui css.
I added this to my global css:
.MuiTableSortLabel-root.MuiTableSortLabel-active,
.MuiTableSortLabel-root:hover,
.MuiTableSortLabel-icon {
color: inherit !important;
}
Worked for me with Mui5:
sx = {
{
'&.MuiTableSortLabel-root': {
color: 'white',
},
'&.MuiTableSortLabel-root:hover': {
color: 'blue',
},
'&.Mui-active': {
color: 'blue',
},
'& .MuiTableSortLabel-icon': {
color: 'blue !important',
},
}
}
'&.MuiTableSortLabel-root' <-- no space &.
'&.Mui-active' <-- no space &.
'& .MuiTableSortLabel-icon' <-- space