React material-ui

設定

Laravel

composer require laravel/ui:^X.0
上記に加えて↓npmでのインストールが必要

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;