Material-UI에서는 앱 전체의 모양과 동작을 Theme에서 설정할 수 있습니다.

과거에 몇번의 프런트 엔드 개발로 Material-UI 를 사용해 왔습니다만, 그 안에 반드시라고 해도 좋을 만큼 설정하는 Theme 항목이 있습니다.

그런 반드시 설정하는 테마 항목을 정리했습니다.

대상 버전은 4.0.0 이후입니다.

또한, 여기서 소개한 설정 항목을 모두 적용한 Theme과 디폴트의 Theme을 비교할 수 있는 샘플을 작성했으므로 참고해 주세요.
반드시 설정해 두고 싶은 Theme 항목

버튼의 라벨이 대문자가 되는 것을 막는다 - typography.button.textTransform="none"

TextField의 변형 변경 - props.MuiTextField.variant

테마 색상 설정 - palette.primary

입력 컨트롤의 색상 통합 - props.{MuiCheckbox,MuiRadio,MuiSwitch}

규규를 채우고 싶을 때 설정하는 항목

업무 앱에서는 어쨌든 화면에 정보를 꽉 채우고 싶다는 요구가 있습니다.
그런 때에 설정하는 항목입니다.

글꼴 크기 줄이기 - typography.fontSize

헤더 높이 줄이기 - mixins.toolbar.minHeight

목록 크기 줄이기 - props.MuiList.dense=true

테이블 크기 줄이기 - props.MuiTable.size="small"

버튼의 라벨이 대문자가 되는 것을 막는다 - typography.button.textTransform="none"

Material-UI 초보자가 반드시 빠지는 포인트입니다.
기본적으로 버튼 레이블은 소문자에서 대문자로 변환됩니다.
이를 방지하려면 typography.button.textTransform="none"를 설정하십시오.

const theme = createMuiTheme({
    typography: {
        button: {
            textTransform: "none"
        }
    }
});

TextField의 변형 변경 - props.MuiTextField.variant

Material-UI TextField에는 세 가지 변형이 있습니다.

standard



outlined


filled


디폴트는 standard입니다만, 이것은 현재 머티리얼 디자인의 문서에는 정의되어 있지 않은 스타일입니다.outlined 또는 filled로 변경하는 것이 좋습니다.

const theme = createMuiTheme({
   props: {
        MuiTextField: {
            variant: "outlined"
        }
    },
});

테마 색상 설정 - palette.primary

샘플 앱이라면 디폴트인 채로 좋지만, 제대로 된 앱이라면 최소한 primary 컬러만으로도 설정해 둡시다.

설정 방법은 문서에 쓰여진 거리 입니다만, 이하와 같이 여러가지 설정 방법이 있습니다.

미리 정의된 HUE에서 지정

import {blue} from "@material-ui/core/colors";
const theme = createMuiTheme({
    palette: {
        primary: blue,
    }
});

HUE와 Shade로 지정한다. main만 지정하면 light나 dark는 자동 설정된다.

const theme = createMuiTheme({
    palette: {
        primary: {
            main: blue["500"],
        }
    }
});

main 이외도 지정

const theme = createMuiTheme({
    palette: {
        primary: {
            light: blue["300"],
            main: blue["500"],
            dark: blue["700"],
        }
    }
})

자신의 색상 지정

const theme = createMuiTheme({
    palette: {
        primary: {
            light: "#64b5f6",
            main: "#2196f3",
            dark: "#1976d2",
        }
    }
})

어떤 색상으로 만들고 싶은지 결정하려면 문서에 소개된 도구을 사용하면 좋을 것입니다.

입력 컨트롤의 색상 통합 - props.{MuiCheckbox,MuiRadio,MuiSwitch}

Checkbox , Radio , Switch 의 3 개의 컴퍼넌트는 디폴트 칼라가 secondary 로 되어 있습니다.

취향의 문제입니다만, primary 로 해 두는 쪽이 통일감이 있다고 생각합니다.

const theme = createMuiTheme({
    props: {
        MuiCheckbox: {
            color: "primary"
        },
        MuiRadio: {
            color: "primary"
        },
        MuiSwitch: {
            color: "primary"
        },
    }
});

글꼴 크기 줄이기 - typography.fontSize

const theme = createMuiTheme({
    typography: {
        fontSize: 12,
    }
});

헤더 높이 줄이기 - mixins.toolbar.minHeight

const theme = createMuiTheme({
    mixins: {
        toolbar: {
            minHeight: 42
        }
    },
});

목록 크기 줄이기 - props.MuiList.dense=true

const theme = createMuiTheme({
    props: {
        MuiList: {
            dense: true
        },
    }
});

테이블 크기 줄이기 - props.MuiTable.size="small"

const theme = createMuiTheme({
    props: {
        MuiTable: {
            size: "small"
        },
    }
});