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;

React

前の記事

React Redux
Bootstrap

次の記事

Bootstrap DatetimePicker