I have been searching the web for a while, but I could not understand how to apply the default dark theme that is shown in the site of Material-ui, where you can toggle between the light and dark theme.
They say those are default ones, but how do I use them?
Thanks!
You can use them by creating a Theme like this:
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
const THEME = createMuiTheme({
palette: {
type: 'dark',
},
});
class YourComponent extends Component {
render() {
return (
<MuiThemeProvider theme={THEME}>
... your other components
</MuiThemeProvider>
)
}
}
export default YourComponent;
The toggle can be done with a button like this example.
I am trying to use breakpoints with {withStyles} from "#material-ui/styles", but the debugger shows that theme.breakpoints is not defined.
I tried to wrap the component with ThemeProvider but it does not work.
https://codesandbox.io/s/material-demo-shgh7?from-embed
withStyles exported with #material-ui/styles not provide theme props, you'll use import { withStyles } from "#material-ui/core/styles";
Exemplo no code sand box arrumado ai
class app extends Component{
render(){
const {classes} = this.props
return (
<div className={classes.root}></div>
)
}
}
const style = theme => ({
root: {
[theme.breakpoints.up('sm'){ //only show on mobile or small screen
display: 'none'
},
}
})
export default withStyles(style)(app)
Simply need to use withStyles some how to edit the default color from the primary/error color to simply just use black. But since the update from 0.19.0 to beta 1 this doesn't seem possible now.
The error message (the one under the text input) is using the object under theme.palette.error (see source) to choose which color to use.
That same palette color is used for the text field label too.
If you want to change both at the same time the right approach would be to use a custom theme that rewrites the theme.palette.error to something else.
import { createMuiTheme, createPalette } from 'material-ui/styles';
import grey from 'material-ui/colors/grey';
const theme = createMuiTheme({
palette: createPalette({
error: grey
})
});
If you want to change just the FormHelperText color then you could customize it in theme by using the overrides parameter.
const theme = createMuiTheme({
overrides: {
MuiFormHelperText: {
error: {
color: 'black'
}
}
}
});
To change the Label of the TextField in the current version (v1.2.1)
You have to set the the color like this:
const theme = createMuiTheme({
palette: {
text: {
secundary: 'black'
}
}
}
});
for error the path is palette.error.main
the easiest way to find the right variables is to look directly into the code
I can seem to find anywhere in the documentation how to go about setting the ripple color on a material-ui ListItem. I have the ListItem wrapped in a MuiThemeProvider with my overridden theme like this:
const muiTheme = getMuiTheme({
palette: {
hoverColor: 'red',
},
});
<MuiThemeProvider muiTheme={muiTheme}>
<ListItem>
...
</ListItem>
</MuiThemeProvider>
What palette color property should I set to change the ripple color?
The ripple effect comes from a child component called TouchRipple. Specifically, the ripple color comes from the background-color of an element which is selectable using the MuiTouchRipple-child class. The ripple color is currentColor by default, but can be overridden easily.
Note that this works for any button-based component, not just ListItem.
Examples:
Styled Components API:
const MyListItem = styled(ListItem)`
.MuiTouchRipple-child {
background-color: red;
}
`;
Hook API:
const useStyles = makeStyles({
root: {
'.MuiTouchRipple-child': {
backgroundColor: 'red';
}
}
});
const MyListItem = () {
const classes = useStyles();
return <ListItem button className={classes.root}>Hook</ListItem>;
}
Global CSS:
.MuiListItem-root .MuiTouchRipple-child {
background-color: red;
}
I got here working on a similar issue on the Button, but it appears to be consistent across ripple effect, so perhaps this will help someone in the future.
In Material-UI next/v1, the rippleColor is linked explicitly to the label color of the element. If you want the ripple and label to be different colors, you have to override the label color separately.
import MUIButton from 'material-ui/Button';
import {withStyles} from 'material-ui/styles';
const Button = (props) => {
return <MUIButton className={props.classes.button}>Hat</MUIButton>
const styles = {
button: {color: 'rebeccapurple'}
};
export default withStyles(styles)(Button);
This should get you an overridden ripple color.
This is how you can globally change ripple color to red.
import React from "react";
import { createMuiTheme, ThemeProvider } from "#material-ui/core/styles";
import List from "#material-ui/core/List";
import ListItem from "#material-ui/core/ListItem";
import ListItemText from "#material-ui/core/ListItemText";
const theme = createMuiTheme({
overrides: {
// Style sheet name
MuiTouchRipple: {
// Name of the rule
child: {
// Some CSS
backgroundColor: "red"
}
}
}
});
const App = () => {
return (
<ThemeProvider theme={theme}>
<List>
<ListItem button>
<ListItemText primary="Item One" />
</ListItem>
<ListItem button>
<ListItemText primary="Item Two" />
</ListItem>
{/* <ListItem button> ... </ListItem> */}
</List>
</ThemeProvider>
);
};
export default App;
Play with the code in CodeSandBox.
Useful links:
Here's what the theme object looks like with the default values.
The overrides key enables you to customize the appearance of all instances of a component type.
You're on the right track! To change the ripple color, your theme should be:
const muiTheme = getMuiTheme({
ripple: {
color: 'red',
},
});
...however, that changes the ripple color for most of the material-ui components, not just ListItem. You can change the ripple color directly on the ListItem with the focusRippleColor and touchRippleColor properties:
<ListItem focusRippleColor="darkRed" touchRippleColor="red" primaryText="Hello" />
If you want to change the color of the ripple effect it can be done through the theme like you tried to do.
In the theme you can change the TouchRippleProps's classes and define your color in the CSS style you have.
import React from 'react';
import { createMuiTheme, ThemeProvider, Button } from '#material-ui/core';
const theme= createMuiTheme({
props:{
MuiButtonBase: {
TouchRippleProps: {
classes: {
root: 'CustomizeTouchRipple'
}
}
}
}
});
export default function App() {
return (
<ThemeProvider theme={theme}>
<Button>Click</Button>
</ThemeProvider>
);
}
And in the CSS style file:
.CustomizeTouchRipple {
color: red;
}
Simple as that.
Update 1:
Instead of using a CSS class style you can directly put style: {color: red[500]}.
It seems like in the current version I need to use the sx prop on <ListItem />.
<ListItem
sx={(theme) => ({
"& .MuiTouchRipple-child": {
backgroundColor: `${theme.palette.primary.main} !important`,
},
})}
>
Content
</ListItem>
this worked for me:
.mat-radio-button.mat-accent .mat-radio-inner-circle,
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element,
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
.mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
background-color: mat-color($my-gray, 500);
}
I would like to set the colors of various parts of the slider,
the handle and both parts of the track: before and after the handle.
Or better still: make the slider invisible (but still working) so I can paint something myself based on the slider value...
I don't think the currently available style-property enables me to do this ?
You're right, you can't do this just using the style property.
However you can change it's colors customizing the mui theme.
http://www.material-ui.com/v0.15.0-alpha.2/#/customization/themes
Example:
import React from 'react';
import Slider from 'material-ui/Slider';
import MuiThemeProvider from 'material-ui/lib/MuiThemeProvider';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
const muiTheme = getMuiTheme({
slider: {
trackColor: 'yellow',
selectionColor: 'green'
},
});
const SliderExample = () => (
<div>
<MuiThemeProvider muiTheme={muiTheme}>
<Slider />
</MuiThemeProvider>
</div>
);
export default SliderExampleSimple
Note: The handle will have the same color as the line before it..(selectionColor)