using Material UI V5 and i can't change the border color of my TextField with the sx prop.
Changing the color of the label and input works fine, but not with border color.
<TextField
sx={{
input: { color: 'white' } ,
label: {color: 'white'},
borderColor: 'white',
border: {color: 'white'},
}}
Any ideas?
The TextField is a weird one, the border is actually defined on the fieldset element. The following should style that.
<TextField
sx={{
fieldset: { borderColor: "red" }
}}
Here is a screen capture of the TextField HTML to help show the fieldset element I'm talking about.
For changing the border color, you can change borderBottom color inside input:
<TextField sx={{
input: {
color: "#ffffff",
borderBottom: "1px solid #ffffff",
},
}}/>
Related
I am having trouble styling the Menu component in Material-UI v5.
I have this UI:
<Menu
defaultValue={undefined}
id="simple-menu"
open={openMenu}
onClose={onCloseHandler}
anchorEl={anchorEl}
MenuListProps={{ onMouseLeave: onCloseHandler }}
elevation={0}
sx={{ color: "white", backgroundColor: "blue" }}
>
When I use this code all the UI gets blue:
After that I try to apply global style overrides to the paper of the menu, but nothing happened. The styles did not change:
components: {
MuiMenu: {
styleOverrides: {
paper: {
backgroundColor: arcBlue,
color: arcBlue,
borderRadius: "0px",
},
},
}
}
Please some help here
Passing sx directly on the Menu component applies the styles to the component's root (which is what's causing your style modifications to apply to the overlay blanket).
In your case, since you're attempting to only style the MUI list portion of the menu, you want to pass the sx prop directly to the underlying list component, using the MenuListProps prop. For example:
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
sx: { backgroundColor: "blue" }
}}
>
Which produces:
Working CodeSandbox: https://codesandbox.io/s/twilight-glitter-cj83rc?file=/demo.tsx:758-951
result
I'd want to add a customised horizontal stepper, but the text colour is too near to the background colour; how can I modify the font color?
https://mui.com/material-ui/react-stepper/#customized-horizontal-stepper
You can change the color with sx prop:
<Stepper
...
sx={{ "& .MuiSvgIcon-root": { color: "red" } }} //or any color
>
How to change these default 0 to some other value(I am using this ToggleButton component )
.css-1gjgmky-MuiToggleButtonGroup-root .MuiToggleButtonGroup-grouped:not(:last-of-type) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
I have tried
const StyledToggleButton = styled(ToggleButton)({
borderBottomRightRadius: 4,
borderTopRightRadius: 4,
});
But this failed
re your question's particular answer you can try following way.
const StyledToggleButton = styled(ToggleButton)({
'&.MuiToggleButtonGroup-grouped:not(:last-of-type)':{
borderRadius: '4px !important',
},
});
But my preferred way to display toggle buttons is below,
<ToggleButton
sx={{
"&.MuiToggleButtonGroup-grouped": {
borderRadius: "4px !important",
mx: 1,
border: "1px solid lightgrey !important"
}
}}
>
...
</ToggleButton>
In your node module package go to the #mui then material then tooglebuttongroup folder then you'll find ToggleButtonGroup.js file there you'll find the default settings you can change as per your desire. enter image description here
I'm trying to customize material UI's textfield component.
I can modify the bottom border color before I move my mouse over the field, and its color after I click on the field. But between these two moments, when my mouse just hovers over the field, the bottom border goes black, and I can't figure out how to change that color. I've tried to identify the problem by using different colors, but even the on-hover green just appears next to the black line. Trying to identify it via developer tools hasn't helped - there seems to be nothing that would make the on-hover line black. How could I get a hold of this mysterious black line/color?
Here's a picture of the component when I hover my mouse over it
const CreateStyles = makeStyles(() => ({
root: {
'& .MuiInput-underline:before': {
borderBottom: '2px solid white',
},
'& .MuiInput-underline:after': {
borderBottom: '2px solid yellow',
},
'& .MuiInput-underline:hover': {
borderBottom: '2px solid green',
},
},
}));
This black line on green line appears because you are overriding .MuiInput-underline:hover. Try to override .MuiInput-underline:hover:before instead, like:
root: {
"& .MuiInput-underline:before": {
borderBottom: "2px solid white"
},
"& .MuiInput-underline:after": {
borderBottom: "2px solid yellow"
},
"& .MuiInput-underline:hover:before": {
borderBottom: "2px solid green"
}
}
And black line disappears. Here a codesandbox example.
I am starting off with Ionic 4 and have soem trouble with the colors.
https://ionicframework.com/docs/theming/basics
So I can do
<span color="primary">TEXT</span>
and the text will be blue. But in the documentation there are two other types of primary. Shade and Tint. How can I make my text primary tint?
If you wish to set specific variation of a color, such as tint, do not set the color property in the ion-text element and define a custom class.
your.page.html
<ion-text class="my-class">
<h1>text</h1>
</ion-text>
your.page.scss
.my-class {
color: var(--ion-color-primary-tint);
}
Ionic 4 theme color can be found in theme > variables.scss
The Ionic CSS variables are placed inside the :root.
:root {
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 218,93,88;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
...
}
USAGE
On an element with takes the color tag.
<div color="primary"></div>
<div color="primary-shade"></div>
<div color="primary-tint"></div>
On a given class using the Ionic custom color properties.
.class{
color: var(--ion-color-primary);
}
.class{
color: var(--ion-color-primary-shade);
}
.class{
color: var(--ion-color-tint);
}