2.0.5 • Published 4 days ago
mui-styles v2.0.5
mui-styles
Material UI v5 and later versions
Install
Using npm:
npm install mui-styles
Usage Example
import { makeStyles } from "mui-styles";
const useStyles = makeStyles({
container: {
width: "100%",
height: 100,
padding: 10,
backgroundColor: '#fff',
borderRadius: 20
},
});
export default function App() {
const classes = useStyles();
return <div className={classes.container}>Hello world</div>;
}
MakeStyles with theme
import { makeStyles, Theme } from "mui-styles";
const useStyles = makeStyles((theme: Theme) => ({
width: "100%",
height: 100,
padding: 10,
backgroundColor: theme.palette.primary.main,
borderRadius: 20,
}));
export default function App() {
const classes = useStyles();
return <div className={classes.container}>Hello world</div>;
}
Styled components
import { styled } from "mui-styles";
import { Card } from "@mui/material";
const MuiCard = styled(Card)({
maxWidth: 300,
borderRadius: 20,
padding: 15,
margin: 20,
textAlign: "center"
});
export default function StyledComponents() {
return <MuiCard>Styled with card</MuiCard>;
}
With styles component
import * as React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'mui-styles';
const useStyles = {
container: {
width: "100vw",
height: "100vh",
padding: 0,
},
};
function WithStylesComponent(props) {
const { classes } = props;
return <div className={classes.container}>With styles component</div>;
}
WithStylesComponent.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(useStyles)(WithStylesComponent);
Authors
2.0.5
4 days ago
2.0.4
2 months ago
2.0.3
3 months ago
2.0.2
3 months ago
1.0.8
4 months ago
2.0.1
4 months ago
2.0.0
4 months ago
1.0.7
5 months ago
1.0.6
5 months ago
1.0.5
5 months ago
1.0.2
7 months ago
1.0.4
6 months ago
1.0.3
7 months ago
1.0.1
8 months ago
0.0.1
10 months ago
1.0.0
9 months ago
0.0.2
10 months ago
5.5.0
2 years ago