머티리얼 UI 구성요소를 맞춤설정하는 두 가지 방법...

소개

Material-Ui는 웹사이트 및 웹앱의 프런트엔드를 디자인하기 위한 고글의 라이브러리입니다. 바닐라 CSS를 사용하는 것이 좋습니다. 그러나 Material-UI 커스터마이제이션을 처음 접하는 사람들에게는 까다로운 부분이 될 수 있습니다.

두 가지 방법으로 material-ui를 사용자 정의할 수 있습니다.

글로벌 수업

사용자 정의 클래스

글로벌 클래스

프로젝트 전체에서 전역적으로 사용되는 클래스를 기본, 보조, 전환 등과 같은 전역 클래스라고 합니다.
기본 테마에서 material-ui 전역 클래스를 개체로 찾을 수 있습니다.

전역 클래스를 사용자 정의하는 방법

사용자 정의 개체를 만들고 이를 <ThemeProvider theme={variable}></ThemeProvider> 구성 요소에 래핑하여 전역 클래스를 사용자 정의할 수 있습니다. 개체 이름은 Mui 기본 테마 개체와 동일해야 합니다.

예시

const theme = createMuiTheme({
palette: {
primary: pink,
secondary: green
},

shape: {
borderRadius: 8,
},

});

export default function App()
{
<ThemeProvider theme={theme}>
<component1/>
<component2/>
.
.
.
<componentN/>
</ThemeProvider>

위의 사용자 정의 테마 개체는 material-ui 테마를 재정의합니다.

구성 요소의 사용자 지정 스타일 지정

머티리얼 UI의 미리 정의된 개체를 사용하지 않고도 원하는 대로 스타일을 지정할 수 있는 사용자 지정 개체를 만들 수 있습니다. 이를 위해 makeStyles 후크를 사용할 수 있습니다.

기본적으로 makeStyles 후크의 테마 소품에 값을 제공하여 구성 요소의 스타일을 지정합니다.

스타일링을 위해 자신의 이름 등을 사용할 수 있습니다. 그런 다음 모든 것이 ThemeProvider 구성 요소에 멋지게 감쌌습니다.

예시

const useStyle = makeStyles(theme =>({
root :{
height: --;
width: --;
background: ==
},

slider: {
...},

header: {
...}

//The above is custom template

export default function App()
{
const classes = useStyle(); //put function in classes variable to access the objects.

return(
<ThemeProvider theme={theme}>
<div className={classes.root}>
<div className={classes.header}/>
<div className={classes.slider}/>
</div>
)}