I am very new at using this UI framework along with React. I was allocated to develop an application which is supposed to have more design pattern and I chose a framework that also don't rely on Jquery code. However, I am struggling to customize pre-made ponents. They have a override section on their website but I didn't understand it very well.
I know that there are 2 ways of customizing an element
- You can create a
const styles = theme => { styles here }. Then you invoke a higher order ponent called withStyles. then the css properties defined will be available onclassesprop. - You can also use classes property to change inner ponents, example:
<Drawer classes={x}>.
the Second one is the one I don't understand exactly how it works. For instance they have a ponent. But to change its background for me was very plicated, I had to change it manually on my custom .css file. I couldnt use className and even using classes property it didn't work.
Can anyone explain to me a little better how exactly the customization is done?
I am very new at using this UI framework along with React. I was allocated to develop an application which is supposed to have more design pattern and I chose a framework that also don't rely on Jquery code. However, I am struggling to customize pre-made ponents. They have a override section on their website but I didn't understand it very well.
I know that there are 2 ways of customizing an element
- You can create a
const styles = theme => { styles here }. Then you invoke a higher order ponent called withStyles. then the css properties defined will be available onclassesprop. - You can also use classes property to change inner ponents, example:
<Drawer classes={x}>.
the Second one is the one I don't understand exactly how it works. For instance they have a ponent. But to change its background for me was very plicated, I had to change it manually on my custom .css file. I couldnt use className and even using classes property it didn't work.
Can anyone explain to me a little better how exactly the customization is done?
Share Improve this question asked Dec 5, 2018 at 12:00 Jeff GoesJeff Goes 5553 gold badges8 silver badges23 bronze badges1 Answer
Reset to default 15The background, and other colors you can change by updating the theme. That way you can customize primary/secondary background and text colors, as well as use that in your styles.
As for the custom styling of particular ponents; the idea is to use withStyles as a Higher Order Component, wrapping your ponents. It takes theme as the parameter and passes classes as props to wrapped ponent.
Example:
import { withStyles } from '@material-ui/core/styles/withStyles';
const styles = theme => ({
someClass: {
padding: theme.spacing.unit * 5
},
otherClass: {
background: 'red'
}
});
Once the styles are defined, you can use them in your ponent like so:
const MyComponent = (props) => {
return (<Button className={props.classes.someClass}>Some Action</Button>)
}
export default withStyles(styles)(MyComponent);
The withStyles will pass the styles in the props as classes, and you can then use them. If you're using functional ponents, you can access them via props.classes, if you're extending Component, they will be in this.props.classes
If you wish to use multiple classes, you'll need to install classnames dependency, and import it:
import React from 'react';
import { withStyles } from '@material-ui/core/styles/withStyles';
import classNames from 'classnames';
const styles = theme => ({
someClass: {
padding: theme.spacing.unit * 5
},
otherClass: {
background: 'red'
}
});
const MyComponent = (props) => {
return (<Button className={classNames(props.classes.someClass, props.classes.otherClass)}>Some Action</Button>)
}
export default withStyles(styles)(MyComponent);
The classes property can also be used to set multiple classes, but that depends on the Material-UI ponent styling API. For example, for Tab ponent
<Tab label="Hello" classes={ { root: classes.tab, selected: classes.tabSelected }} />
takes root as styles to be applied by default, and selected will be applied when tab is selected. In this case, the styles would contain:
const styles = theme => ({
tab: {
minWidth: 'auto',
fontSize: '11px',
fontWeight: 'bold'
},
tabSelected: {
background: theme.palette.background.paper,
color: theme.palette.secondary.main
},
};
Note that these are using the Tab's CSS API, to map custom styles with predefined class names.
And, of course, the Component with Tab would need to be wrapped in withStyles(styles)(Component).
Here's a live example with customized theme, and customized buttons taking multiple classes.