React material-ui
險ュ螳
Laravel
composer require laravel/ui:^X.0
荳願ィ倥↓蜉縺医※竊渡pm縺ァ縺ョ繧、繝ウ繧ケ繝医シ繝ォ縺悟ソ隕
npm
npm install @material-ui/core
窶サpackage.json
{
縲ス,
縲"dependencies": {
縲縲"@material-ui/core": "^X.XX"
縲}
}
螳溯」
繝懊ち繝ウ
import React from 'react';
import Button from '@material-ui/core/Button';
function App() {
縲return (
縲縲<div>
縲縲縲<Button variant="contained" color="primary">
縲縲縲縲Test
縲縲縲</Button>
縲縲</div>
縲);
}
export default App;
Style(makeStyles )
import React from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
縲button: {
縲縲backgroundColor: 'green'
縲}
});
const App = () => {
縲const classes = useStyles();
縲return (
縲縲<Button variant="contained" className={classes.button}>
縲縲縲Test
縲縲</Button>
縲);
}
export default App;
Style(styled)
import React from 'react';
import Button from '@material-ui/core/Button';
import { styled } from '@material-ui/core/styles';
const CustomButton = styled(Button)({
縲backgroundColor: 'red'
});
const App = () => {
縲return (
縲縲<CustomButton>
縲縲縲Test
縲縲</CustomButton>
縲);
}
export default App;
Style(withStyles)
import React from 'react';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
const styles = {
縲button: {
縲縲backgroundColor: 'orange'
縲}
};
const App = (props) => {
縲const { classes } = props;
縲return (
縲縲<Button variant="contained" className={classes.button}>
縲縲縲Test
縲縲</Button>
縲);
}
export default withStyles(styles)(App);
Style(ThemeProvider)
窶サindex.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@material-ui/core/styles';
const theme = {
縲color: 'blue',
};
ReactDOM.render(
縲<ThemeProvider theme={theme}>
縲縲<App />
縲</ThemeProvider>,
縲document.getElementById('root')
);
窶サApp.js
import React from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
縲button: {
縲縲backgroundColor: theme.color
縲}
}));
const App = () => {
縲const classes = useStyles();
縲return (
縲縲<Button variant="contained" className={classes.button}>
縲縲縲Test
縲縲</Button>
縲);
}
export default App;