【React】React基礎編(MUI編)

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material react-icons

import { createTheme } from '@mui/material';
const theme = createTheme({
});
export default theme;

import './App.css';
import Sample from 'Sample';
import { CssBaseline, ThemeProvider } from '@mui/material';
import theme from 'theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline/>
      <div className="App">
        <Sample />
      </div>
    </ThemeProvider>
  ); 
}

export default App;

import {Button,Checkbox,Switch } from '@mui/material';
function Sample() {
    return (
        <div>
            <div>
                <Button variant="contained">Text</Button>
                <Checkbox defaultChecked />
                <Switch defaultChecked />
            </div>
        </div>
    )
}
export default Sample;

import { createTheme } from '@mui/material';
import { orange } from '@mui/material/colors';


// カスタムカラーの設定
declare module '@mui/material/styles' {
    interface Palette {
        sample: Palette['primary'];
    }
    interface PaletteOptions {
        sample?: PaletteOptions['primary'];
    }
}
declare module '@mui/material' {
    interface ButtonPropsColorOverrides {
        sample: true;
    }
    interface CheckboxPropsColorOverrides {
        sample: true;
    }
    interface SwitchPropsColorOverrides {
        sample: true;
    }
}

const theme = createTheme({
    palette: {
        mode: 'light', // dark or light 表示モード
        primary: {
            main: '#1976d2',
            light: '#42a5f5',
            dark: '#1565c0',
            contrastText: '#fff'
        },
        secondary: orange,
        sample: {
            main: '#378030',
            light: '#53BF49',
            dark: '#2C6627',
            contrastText:'#fff'
        }
    }
});
export default theme;

import {Button,Checkbox,Switch } from '@mui/material';
function Sample() {
    return (
        <div>
            <div>
                <Button variant="contained">Text</Button>
                <Checkbox defaultChecked />
                <Switch defaultChecked />
            </div>
            <div style={{marginTop: 10}}>
                <Button variant="contained" color='secondary'>Text</Button>
                <Checkbox defaultChecked color='secondary'/>
                <Switch defaultChecked color='secondary'/>
            </div>
            <div style={{marginTop: 10}}>
                <Button variant="contained" color='sample'>Text</Button>
                <Checkbox defaultChecked color='sample' />
                <Switch defaultChecked color='sample' />
            </div>
        </div>
    )
}
export default Sample;

npm install @fontsource/crimson-pro @fontsource/noto-sans-jp

import { createTheme } from '@mui/material';
import "@fontsource/crimson-pro";
import '@fontsource/noto-sans-jp';

const theme = createTheme({
    typography: {
        fontFamily: [
            '"Crimson Pro"',
            '"Noto Sans JP"',
            'sans-serif',
            '"Myrica M"',
            '"Moralerspace Neon HW"'
        ].join(','),
        fontSize: 15,
    },
});
export default theme;

import { createTheme } from '@mui/material';
import "@fontsource/crimson-pro";
import '@fontsource/noto-sans-jp';

// オリジナルvariantの設定用
declare module "@mui/material/styles" {
    interface TypographyVariants {
        sample: React.CSSProperties;
    }

    // allow configuration using `createTheme`
    interface TypographyVariantsOptions {
        sample?: React.CSSProperties;
    }
}
// Update the Typography's variant prop options
declare module "@mui/material/Typography" {
    interface TypographyPropsVariantOverrides {
        sample: true;
    }
}

const theme = createTheme({
    typography: {
        fontFamily: [
            '"Crimson Pro"',
            '"Noto Sans JP"',
            'sans-serif',
        ].join(','),
        fontSize: 15,
        subtitle1:{
            fontSize: '1.5rem',
            fontFamily: 'Arial',
            fontStyle: 'italic',
            fontWeight: 500
        },
        body1:{
            fontFamily: 'Segoe UI Symbol',
        },
        sample: {
            fontWeight: 500,
            color: 'red',
            fontSize: 30,
            fontFamily: 'BlinkMacSystemFont',
        },
        h3: undefined // バリアントを無効化
    },
});
export default theme;

import {Button,Checkbox,Switch,Typography} from '@mui/material';
function Sample() {
    return (
        <div>
            <div>
                <Button variant="contained">Text</Button>
                <Checkbox defaultChecked />
                <Switch defaultChecked />
                <Typography>Sample Text</Typography>
                <Typography variant='subtitle1'>Sample Text</Typography>
                <Typography variant='sample'>Sample Text</Typography>
            </div>
        </div>
    )
}
export default Sample;

import { createTheme } from '@mui/material';

const theme = createTheme({
    spacing: 2
});
export default theme;

<Box sx={{m:2}}>bbb</Box> // margin: 2 * 2 = 4px
<Box sx={{p:3}}>bbb</Box> // padding: 2 * 3 = 6px;

import { createTheme } from '@mui/material';

declare module '@mui/material/styles' {
    interface BreakpointOverrides {
        xs: false; // removes the `xs` breakpoint
        sm: false;
        md: false;
        lg: false;
        xl: false;
        mobile: true; // adds the `mobile` breakpoint
        tablet: true;
        laptop: true;
        desktop: true;
    }
};
const theme = createTheme({
    breakpoints:{
        values:{
            mobile: 0, // adds the `mobile` breakpoint
            tablet: 640,
            laptop: 1024,
            desktop: 1200,
        }
    }
});
export default theme;

import { Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import { red, green, blue, orange } from '@mui/material/colors';

const Wrap = styled('div')(({ theme }) => ({
    padding: theme.spacing(1),
    [theme.breakpoints.up('mobile')]: {
        backgroundColor: orange[500], // ブラウザのwidth= 0px ～ 
    },
    [theme.breakpoints.up('tablet')]: {
        backgroundColor: red[500], // ブラウザのwidth= 640px ～ 
        color: '#FFF'
    },
    [theme.breakpoints.up('laptop')]: {
        backgroundColor: blue[500], // ブラウザのwidth= 1023px ～ 
    },
    [theme.breakpoints.up('desktop')]: {
        backgroundColor: green[500], // ブラウザのwidth= 1200px ～
    },
}));

function Sample() {
    return (
        <Wrap>
            <Typography>abc</Typography>
            <Typography sx={{display: {mobile:'none', laptop:'block'}}}>出現</Typography>
        </Wrap>
    )
}
export default Sample;

theme.transitions.create(props, options) => transition

import { Button } from '@mui/material';
import { styled } from '@mui/material/styles';

const CustomBtn = styled(Button)`
    ${ ({ theme }) => `
        cursor: crosshair;
        opacity: 0.2;
        margin-top: 30px;
        background-color: ${theme.palette.secondary.dark};
        transition: ${theme.transitions.create(
            [
                'background-color', 
                'margin-top',
                'opacity',
                'transform'
            ],
            {
                delay: '100ms',
                duration: theme.transitions.duration.standard,
                easing:theme.transitions.easing.easeIn,      
            }
        )};
        &:hover {
            transform: scale(1.4);
            background-color: ${theme.palette.success.main};
            margin-top: 35px;
            opacity: 1;
        }
    `}
`;

function Sample() {
    return (
        <CustomBtn variant='contained'>ボタン</CustomBtn>
    )
}
export default Sample;

import { createTheme } from '@mui/material';

const theme = createTheme({
    shape: {
        borderRadius: 15
    }
});
export default theme;

import { createTheme } from '@mui/material';

declare module '@mui/material/Button' {
    interface ButtonPropsVariantOverrides {
        sample: true;
    }
}

const theme = createTheme({
    components:{
        MuiButtonBase:{
            defaultProps: {
                centerRipple: false
            },
            styleOverrides: {
                // Name of the slot
                root: {
                    cursor: 'zoom-in',
                }
            },
        },
        MuiButton:{
            variants: [
                {
                    props: { variant: 'sample' },
                    style: {
                        border: '1px solid blue'
                    }
                }
            ]
        }
    }
});
export default theme;

import { TextField } from '@mui/material';
import { useRef, useState } from 'react'

function Sample() {
    const iptRef = useRef<HTMLInputElement>(null);
    const [text, setText] = useState<string>('テキスト');

    if ( iptRef.current !== null ){
        console.log(iptRef.current);
    }

    return (
        <TextField
            ref={iptRef}
            variant='outlined'
            value={text}
            onChange={(e) => setText(e.target.value)} />
    )
}
export default Sample;

import { TextField } from '@mui/material';
import { useRef, useState } from 'react'

function Sample() {
    const iptRef = useRef<HTMLInputElement>(null);
    const [text, setText] = useState<string>('テキスト');

    if ( iptRef.current !== null ){
        console.log(iptRef.current);
    }

    return (
        <TextField
            inputRef={iptRef}
            variant='outlined'
            value={text}
            onChange={(e) => setText(e.target.value)} />
    )
}
export default Sample;