How can I change the root styles in Checkbox. This does not work.
<CheckboxItem
onChange={()}
checked={isChecked}
label="Show Checkbox"
classes={{ root: classes.checkbox }}
/>
className={{ root: classes.checkbox }}
is erroring out as well. Thank you.
You can do it either using the sx property like the documentation suggests:
<Checkbox
{...label}
defaultChecked
sx={{
color: pink[800],
'&.Mui-checked': {
color: pink[600],
},
}}
/>
Another way you can create a styled component:
const CheckBoxStyled = styled(Checkbox)`
root: {
"&$checked": {
"& .MuiIconButton-label": {
color: "red",
...
},
...
}
},
`;
<CheckBoxStyled checked value="TestValue" onChange={handleChange}/>
In case the above it's not a big help can you please provide some more info of what you want to change and the version of MUI and probably can send you a working sample.
Related
I would have black text color, not default gray in the disabled TextField, tried this, based on this: https://stackoverflow.com/a/70943025/239219
<TextField
id="outlined-basic"
value={'https://git.responsive.software/my-app.git'}
fullWidth
size="small"
disabled
variant="filled"
inputProps={{ style: { color: 'black' } }}
/>
But this colors text when it is selected. I need black also for unselected text.
It is also interesting, why my attempt does not work. I guess MUI uses a textfield behind their customized solution. Then why the passed color attribute does not change attribute as in a normal css it would change?
You could add a style specifically if disabled=true. Like this:
// STYLES
export const StyledTextField = styled(TextField, {
shouldForwardProp: (props) => props !== 'disabled',
})<{ disabled: boolean }>(({ disabled }) => ({
color: disabled : 'black' ? 'pink',
}));
// IN THE COMPONENT
<StyledTextField
id="outlined-basic"
value={'https://git.responsive.software/my-app.git'}
fullWidth
size="small"
disabled
variant="filled"
inputProps={{ style: { color: 'black' } }}
/>
(shouldForwardProp makes sure the disabled prop isn't added to the DOM)
Alternatively...
TextField doesn't have a specific disabled class, but if you can change your code to use InputBase instead, you can utilize the disabled class. This CSS is applied when disabled=true in your component. https://mui.com/material-ui/api/input-base/#css
import { inputBaseClasses } from '#mui/material';
...
[`&.${inputBaseClasses.disabled}`]: {
color: 'black',
},
I am trying to figure out Material UI style overriding with a nested component. Say I want to increase bottom border height on a active Tab. This border is applied by the underlying ButtonBase.
Here is the style definition:
const useStyles = makeStyles(theme => ({
root: {
// an example brutal overriding, not clean, I'd like a better approach for the button
"& .MuiSvgIcon-root": {
marginRight: "8px"
}
},
// override Tab
tabWrapper: {
flexDirection: "row"
},
tabSelected: {
color: theme.palette.primary.main
},
tabLabelIcon: theme.mixins.toolbar, // same minHeight than toolbar
// TODO override buttonBase ???
// ...
}));
An example usage:
<Tab
value="/"
classes={{
wrapper: classes.tabWrapper,
selected: classes.tabSelected,
labelIcon: classes.tabLabelIcon
}}
icon={
<React.Fragment>
<DashboardIcon />
</React.Fragment>
}
label="Home"
// TODO: is this the expected syntax? TypeScript is not happy with this prop...
buttonBaseProps={{ classes: {} }}
/>
I have no idea how to define the ButtonBase classes in this example.
How should I define my props to override the ButtonBase style?
Edit: doc is here https://material-ui.com/api/tab/, the last section describe the inheritance process but the documentation is very terse.
Edit 2: the example use case is bad as you should override ".MuiTabs-indicator" to increase the bottom border height (it's actually an additional span not a border) but the question stands. Imagine that I want to change the ButtonBase background-color for example.
So as it turns out, There is no separate ButtonBase component inside the Tab component. So you won't find prop called buttonBaseProps. The tab itself is rendered as the button component.
Whatever style you wanna pass, pass it to the root inside classes. See below
<Tab classes={{
root: classes.customButtonBaseRoot,
wrapper: classes.tabWrapper,
selected: classes.tabSelected,
labelIcon: classes.tabLabelIcon
}}
/>
https://codesandbox.io/s/apply-style-to-buttonbase-in-a-tab-component-izgj5
I am trying to customise the DateTimePicker from Material-UI. Here is its documentation: https://material-ui-pickers.dev/api/DateTimePicker
There is no section for the styling. I want to change the main color for all the coloured components. What I've tried so far is using the general theme documentation and try to change the style of the theme:
const theme = createMuiTheme({
status: {
danger: '#FF72B1',
},
dateTimePicker: {
headerColor: '#FF72B1',
selectColor: '#FF72B1',
},
datePicker: {
selectColor: '#FF72B1',
headerColor: '#FF72B1'
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<Routes />
</ThemeProvider>
)
}
As far as I understood from the theme documentation, the only thing that I've done so far is defining variables with styles, but they are not going to be applied. I have to specify them in the exact component, and here comes the tricky part.
In my Material-UI DateTimePicker:
function MaterialDateTimePicker() {
const classes = useStyles()
return (
<Fragment>
<DateTimePicker
label={label}
inputVariant="outlined"
value={value}
onChange={onChange}
classes={{
root: classes.root,
checked: classes.checked,
}}
/>
</Fragment>
);
}
I have tried to applied the styling:
const useStyles = makeStyles(theme => ({
root: {
color: '#FF72B1',
backgroundColor: 'orange',
'& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': {
backgroundColor: 'green'
}
},
checked: {},
}));
This is how I've been trying to style components with this library, based on research, reading the docu, and some SO answers:
How to change material UI select border and label
So basically you have to go to the documentation, try to find the .XXX class that matches the component that you want to customise, and if documentation is missing, you have to go to the DOM, and start looking for this class.
I did that, but I have a couple of questions:
1) In my particular case, I have the problem that on my DateTimePicker I apply the root classes, which are on the input component level. The calendar that pops up, is not a children of this component, it's open by javascript, therefore I don't know how to access it.
This syntax does not work any longer:
root: {
color: '#FF72B1',
backgroundColor: 'orange',
'& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': {
backgroundColor: 'green'
}
},
Because root is the input, not the calendar that pop ups.
2) Is this really the way to go with this library? Because all the answers on SO and complains go on this direction. Does anybody know another strategy?
3) In #material-ui/pickers node_modules folder I couldn't find the css file. I would like to pick it and customise there, like it's possible for react-dates library etc. Is that possible? Where are the css stylings?
I've prepared a sandbox with what I've tried:
https://codesandbox.io/s/inspiring-napier-zh4os
(Unfortunately the utils library is installed but not working, locally in my computer the picker works fine, I just can't style it)
I'm working with this right now, wat i did to partially override the styles is to wrap in a ThemeProvider (you can pass your theme trow your component)
<MuiPickersUtilsProvider locale={deLocale} utils={DateFnsUtils}>
<Grid container justify="space-around">
<ThemeProvider theme={defaultMaterialTheme}>
<KeyboardDatePicker
...
/>
</ThemeProvider>
</Grid>
</MuiPickersUtilsProvider>
And your theme could be something, like this
import { createMuiTheme } from '#material-ui/core'
const defaultMaterialTheme = createMuiTheme({
overrides: {
MuiPickersCalendarHeader: {
switchHeader: {
color: '#6A148E',
textTransform: 'uppercase',
},
dayLabel: {
textTransform: 'uppercase',
},
},
MuiPickersDay: {
day: {
color: '#707070',
},
daySelected: {
backgroundColor: '#6A148E',
'&:hover': {
backgroundColor: '#6A148E',
},
},
current: {
color: '#6A148E',
},
},
MuiSvgIcon: {
root: {
fill: '#6A148E',
},
},
MuiOutlinedInput: {
root: {
'&:hover': {
border: '10px solid red !important', // i'm struggling with this :/
},
},
},
},
})
export default defaultMaterialTheme
Hope it's help
I think you just need to cancel out the webkit appearance. There are a couple of ways to cancel out specific webkit styles (so you can add your own).
Try the following:
-webkit-appearance: none;
ReactJS inline styles: webkitAppearance: "none";
Also check out other -webkit-[] functions... There are functions for more specific elements such as borders, colours, etc...
Hope this helps :)
How to assign a color to helperText material-UI to highlight the error in TextField.I am unable to set the color to helperText in material-UI.
I tried to use MuiFormHelperText-root-406 to apply CSS
but it does not work
<Grid item xs={3}>
<TextField
label="EmailId"
name="emailId"
value={editItem.emailId}
onChange={this.editInputValue}
helperText={this.state.emailerror} />
</Grid>
.MuiFormHelperText-root-406{
color:rgba(255,0,0,0.5);
}
Add this code: add className={classes.textField} in TextField
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200,
'& p':{
color:'blue',
},
},
<TextField
id="standard-helperText"
label="Helper text"
defaultValue="Default Value"
className={classes.textField}
helperText="Some important text"
margin="normal"
/>
#arpita-patel's answer is correct but you should know that you can also just add this to your CSS:
.MuiFormHelperText-root {
color:rgba(255,0,0,0.5);
}
Or do it based on the parent:
.MuiTextField-root p {
color:rgba(255,0,0,0.5);
}
Each of the above worked for me. I am using Material UI 4.0.2
The best way which I found to style the helperText for the TextField component is similar to the way presented by Arpita Patel.
The only difference is that I am using the attribute classes instead of className as it has been described in Material-UI docs here
You can find there that TextField component can use only one CSS rule name called root (global class is called .MuiTextField-root).
So basically you need to use the below code to style helperText as you like:
JSX (based on your initial code example)
const classes = useStyles();
<TextField
label="EmailId"
name="emailId"
value={editItem.emailId}
onChange={this.editInputValue}
helperText={this.state.emailerror}
classes={{root: classes.textField}}
/>
STYLE via makeStyles
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
textField: {
'& p':{
/* your style for helperText here*/
}
}
})
If #ange-loron's answer didn't work, try to add !important :
.MuiFormHelperText-root {
color: rgba(255,0,0,0.5) !important;
}
I just started to use reacts material-ui and I would like to customize some styles. For example changing tabs background color.
trying to use inlineStyle
like
<Tabs style={this.getStyles().tabs} > </Tabs>
getStyles(){
return {
tabs: {
backgroundColor: Colors.teal200
},
headline: {
fontSize: '24px',
lineHeight: '32px',
paddingTop: '16px',
marginBottom: '12px',
letterSpacing: '0',
fontWeight: Typography.fontWeightNormal,
color: Typography.textDarkBlack,
}
}
}
changes tabs content area but not the header.
here we have some color attributes how we use it? The Docs gives no examples in this case.
How do I proceed?
The way I do it is to override the <Tab> style (if you have a controlled Tabs)
render: function() {
var styles = {
default_tab:{
color: Colors.grey500,
backgroundColor: Colors.grey50,
fontWeight: 400,
},
active_tab:{
color: Colors.deepOrange700,
}
}
styles.tab = []
styles.tab[0] = styles.default_tab;
styles.tab[1] = styles.default_tab;
styles.tab[2] = styles.default_tab;
styles.tab[this.state.slideIndex] = objectAssign({}, styles.tab[this.state.slideIndex], styles.active_tab);
return (
<Tabs>
<Tab style={styles.tab[0]} label="Tab 0" value="0" />
<Tab style={styles.tab[1]} label="Tab 1" value="1" />
<Tab style={styles.tab[2]} label="Tab 2" value="2" />
</Tabs>
)
Though I think the better way is to have more props for Tabs/Tab so we can customize it.
So if anybody would face the same here is what I found
with ThemeManager we can change style outputs
for example
ThemeManager.setTheme(ThemeManager.types.DARK);
changing specific style variables with setPalette
componentWillMount() {
ThemeManager.setPalette({
accent1Color: Colors.indigo50,
primary1Color: "#474B4E",
primary2Color: "#2173B3",
primary3Color: "#A9D2EB",
accent1Color: "#ED3B3B",
accent2Color: "#ED2B2B",
accent3Color: "#F58C8C"
});
}
The most convenient way to customize the component is to simply apply plain old CSS by using the className attribute, since the capabilities of the provided style attributes are fairly limited.
Let's consider a straight forward example:
const MyAwesomeTabContainer = () => (
<Tabs className="tabs-container">
<Tab icon={<Person />} className="tab" />
<Tab icon={<Content />} className="tab" />
</Tabs>
);
The following LESS code (not CSS!) would allow you to customize the style according to your needs:
.tabs-container {
>div:first-child { // modifies the background color
background-color: #f6f6f6 !important;
}
>div:last-child { // changes the distance between tabs and content
margin-top: 10px;
}
.tab {
>div>div { // modifies the font size of the tab labels
font-size: 10px;
svg { // modifies the color of SVG icons
fill: #626262 !important;
}
}
}
}
Unfortunately it is necessary to apply a few !important statements because the style information of the component is set inline in code.
For MUI (Material-UI V5) I wanted to add box shadow for tabs to look like this
You can use "component" property to pass elementType. The component used for the root node. Either a string to use a HTML element or a component. I used "Box" component:
import { Box } from '#mui/material';
...
<Tabs
value={selectedTab}
component={Box}
boxShadow={3}
onChange={changeSelectedTab}
variant="fullWidth"
>
So now I can use all Box component properties like "boxShadow". I think it is more clean to style with properties of other MUI components.Be carefull only on "Caveat with inlining"
https://mui.com/material-ui/guides/composition/#component-prop
https://mui.com/material-ui/api/tabs/#props
I wanted a class on the active tab, so here is a quick solution for that:
<Tabs className="pcd-tabs" onChange={this.handleChange}>
<Tab className="pcd-tab pcd-tab0 pcd-tab-active" label="Chart" value={0} />
<Tab className="pcd-tab pcd-tab1" label="Series" value={1} />
</Tabs>
than
handleChange = (value) => {
document.getElementsByClassName('pcd-tab-active')[0].classList.remove('pcd-tab-active');
document.getElementsByClassName('pcd-tab' + value)[0].classList.add('pcd-tab-active');
};