(9/27/21: 게시물 UI(MUI)Version 5 이후 유효하지 않음)
어떤 CSS 프레임워크가 React에 가장 적합합니까? 왜 그것이 중요한 UI입니까?Material UI는 React 구성 요소의 프레임워크로 설계Google's Material Design를 기반으로 합니다.React에 익숙하면 어셈블리 사용이 얼마나 쉬운지 알 수 있습니다.컨테이너, 버튼, 텍스트 등의 스타일을 설계해야 할 때, 이 요소의 재질 UI 구성 요소를 가져오고 도구로 맞춤형으로 만듭니다.프로젝트와 사용 가능한 구성 요소를 설정합니다.

장치

우선 npm를 통해 원본 파일을 설치합니다

npm install @material-ui/core

기본 Roboto 글꼴을 색인에 로드합니다.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

구성 요소

Material-UI 웹 사이트로 이동하여 사용 중인 구성 요소를 검색하십시오.페이지 아래쪽으로 스크롤하고 API를 클릭하면 모든 도구와 맞춤형 포인트를 볼 수 있습니다.
먼저 구성 요소를 프로젝트에 가져옵니다. 예를 들어 레이아웃

import Typography from '@material-ui/core/Typography'

구성 요소에 포장이 필요한지 여부에 따라 구성 요소 포장을 열고 닫을 수도 있고, 구성 요소를 호출하여 자동으로 닫을 수도 있습니다

<Typography>
  Wrapped content
</Typography>

<TextField />

변형 도구를 사용하여 구성 요소 사용자 정의

<Typography variant='h1'>
  This is H1
</Typography>
<Typography variant='h2'>
  This is H2
</Typography>

격자

Material UI는 flexbox 기반 12열 그리드 시스템을 제공합니다.
메쉬 어셈블리 가져오기

import Grid from '@material-ui/core/Grid'

격자 항목을 둘러싼 격자 용기를 만듭니다

<Grid container>
  <Grid item>
    Item 1
  </Grid>
  <Grid item>
    Item 2
  </Grid>
  <Grid item>
    Item 3
  </Grid>
  <Grid item>
    Item 4
  </Grid>
</Grid>

이것은 이 항목들을 서로 인접하게 하지만, 우리는 단점을 전달할 수 있으며, 간격을 만들고, 격자 응답을 할 수 있다

<Grid container>
  <Grid item xs={3}>
    Item 1
  </Grid>
  <Grid item xs={3}>
    Item 2
  </Grid>
  <Grid item xs={3}>
    Item 3
  </Grid>
  <Grid item xs={3}>
    Item 4
  </Grid>
</Grid>

서랍.

네비게이션 서랍은 링크와 다른 응용 프로그램 기능을 저장할 수 있다.서로 다른 서랍 유형이 있습니다.

임시 - 전환하여 켜거나 끌 수 있으며 컨텐츠 상단

지속성 - 열기 또는 닫기를 전환할 수 있으며 내용과 같은 레벨에 있으면 내용의 크기를 재조정할 수 있다

영구성 - 항상 왼쪽 가장자리에 표시되고 고정되며 닫을 수 없음

서랍 구성 요소 가져오기

import Drawer from '@material-ui/core/Drawer'

서랍을 열고 닫는 구성 요소에 내용을 포장한 다음variant 설정 형식을 사용합니다. 임시 서랍을 사용합니다.그러면 서랍에 나타나고 싶은 쪽을 닻으로 정할게요.

<Drawer variant='temporary' anchor='left'>
  Our Links
</Drawer>

우리는 서랍의 열기나 닫기를 전환할 수 있으며, 열 때 브리치가 필요하다.저는 useState와 버튼으로 전환하는 걸 좋아해요.

const [open, setOpen] = useState(false)
const toggleDrawer = () => { setOpen(open => !open) }

<Button onClick={toggleDrawer}>Toggle Drawer</Button>
<Drawer variant='temporary' anchor='left' open={open}>
  Our Links
</Drawer>

서랍에는 리셋 함수를 받아들이는 onClose 도구가 하나 더 있습니다.사용자가 서랍을 열 때 프로그램의 다른 부분을 눌렀을 때 이 동작을 터치합니다.우리는 상태를 전환하고 서랍을 닫는 ToggleDrawer 함수를 지정할 수 있습니다

<Drawer variant='temporary' anchor='left' open={open} onClose={toggleDrawer}>
  Our Links
</Drawer>

makeStyles 후크

CSS 클래스를 만들고 사용자 정의 CSS를 추가할 수 있습니다.
분해 구조를 사용하여 가져와야 합니다.

import { makeStyles } from '@material-ui/core'

makeStyles에 상수를 지정합니다. 대상을 받아서 CSS 클래스를 만들고 사용자 정의 CSS를 추가합니다.

const useStyles = makeStyles({
   text: {
     fontSize: 50,
     backgroundColor: 'red'
   }
})

Styles를 사용하고 호출하기 위해 구성 요소 함수에 다른 상수를 할당한 다음,className 설정 스타일을 사용하려는 구성 요소에 할당합니다.

function App() {
  const classes = useStyles()

  return (
    <Typography className={classes.text}>
      Wrapped Content
    </Typography>
  );
}

export default App;

더 많은 사용자 정의 옵션을 사용하여 API를 다시 확인하여 사용 가능한 내용을 확인할 수 있습니다.

사용자 정의 테마

Material UI에는 색상을 설정하고 Roboto 글꼴을 사용하는 기본 테마가 있습니다.Material UI 웹 사이트에서 기본 테마를 검색하면 기본 테마 설정을 찾을 수 있습니다.사용자 정의 테마로 이 설정을 변경할 수 있습니다.
먼저 필요한 기능을 프로그램의 루트 구성 요소로 가져와서 전체 프로그램이 사용자 정의 테마에 접근할 수 있도록 합니다

import { createMuiTheme, ThemeProvider } from '@material-ui/core'

CreateMuiteme의 상수를 지정합니다. 이 상수는 사용자 정의 테마를 만드는 대상을 수신합니다.여기서 우리는 주색을 방문한다

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#FEFEFE'
    }
  }
})

ThemeProvider에서 전체 프로그램을 포장하고 theme로 만든 사용자 정의 테마를 분배합니다

function App() {

  return (
    <ThemeProvider theme={theme}>
      <Typography color='primary'>
        Wrapped Content
      </Typography>
    </ThemeProvider>
  );
}

export default App;

우리는 조판 구성 요소의 글꼴을 변경할 수 있다

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#FEFEFE'
    }
  },
  typography: {
    fontFamily: 'Quicksand'
  }
})

기본 테마를 보고 사용자 정의할 다른 설정을 찾습니다

결론

보시다시피 Material UI는 사용과 맞춤형이 매우 쉽습니다.격자 구성 요소는 응답 프로그램을 만드는 것을 매우 쉽게 합니다.깊이 있게 연구하기 위해 Material UI 웹 사이트의 문서를 읽어 보는 것이 좋습니다.나는 또한 위대한 유튜브 강좌를 연결해서 관련 자료 사용자 인터페이스를 배울 것이다.즐거운 코딩!

리소스

Material-UI