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;

Follow me!

蜑阪ョ險倅コ

React Redux

谺。縺ョ險倅コ

Bootstrap DatetimePicker