Box 외에 머티리얼 UI 컴포넌트에 스타일 함수 사용

Aug 20 2020

저는 머티리얼 UI로 시작했습니다. 함께 해주셔서 감사합니다.

<Box mx={2}>즉시 사용 가능한 (ha) 같은 것을 사용할 수 있다는 것을 알고 있습니다 . 따라서 a 주위에 여백을 두려면 TextField상자에 포장 할 수 있습니다.

모든 구성 요소가 이러한 스타일 함수 소품을 사용할 수 있도록 내 앱의 테마를 설정하는 간단한 방법이 있습니까? ( m, p, display등)

그래서 나는 <TextField mx={2}/>그것을 Box.

문서는 이 작업을 수행 할 수 있다는 것을 의미한다 (예제 사용 ThemeProvider에서 styled-components하지만 난 가정 MUI의 그 ThemeProvider같은 방법 ??? 작동)

import React from 'react'
import { ThemeProvider } from 'styled-components'

const theme = {
  spacing: 4,
  palette: {
    primary: '#007bff',
  },
};

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* children */}
    </ThemeProvider>
  )
}

나는 이것을 시도했지만 TextField's my소품 에서 충돌합니다 .

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

// Greatly simplified version of my component
const App = () => <TextField my={2}/> 

let theme = createMuiTheme({})

export default () =>
  <ThemeProvider theme={ theme }>
    <App/>
  </ThemeProvider>;

나는 이와 같이 할 수 있으며 작동합니다.

function App() {
  const Input = styled(TextField)(compose(spacing))

  return <Input my={3}/>
}

그러나 compose스타일 함수를 사용하고 싶을 때마다 구성 요소를 사용해야합니다.

답변

1 RyanCogswell Aug 21 2020 at 15:33

워드 프로세서 (간격 단위는 4 픽셀 대신 8px입니다 예를 들어 같은 것을) 박스를 매개 변수화 할 수있는 테마 기능을하는 방법을 보여주고있다 - 테마 이러한 기능을 사용하려면 아무것도하지 않습니다.

Material-UI는 v5의 핵심 구성 요소에서 @ material-ui / system 기능 을 지원할 계획 이지만 아직 몇 달 남았습니다.

주요 옵션은 예제에서 보여준 것과 같은 작업을 수행하는 것 const Input = styled(TextField)(compose(spacing))입니다 (앱 렌더링 내에서이 작업을 수행하는 대신 최상위 수준으로 이동해야 함 ). 이 TextField기능을 사용할 때마다 대신 별도의 파일에 넣고이 구성 요소를 가져올 수 있습니다. 예를 들면 :

MyTextField.js

import TextField from "@material-ui/core/TextField";
import { styled } from "@material-ui/core/styles";
import { compose, spacing } from "@material-ui/system";

export default styled(TextField)(compose(spacing));

App.js

import React from "react";
import TextField from "./MyTextField";

export default function App() {
  return (
    <div className="App">
      <TextField variant="outlined" label="Material-UI system demo" />
    </div>
  );
}

또 다른 옵션은 복제 소품 과 Box함께 사용 하고 스타일을 지정할 구성 요소를 래핑하는 것입니다. 예를 들면 :

import React from "react";
import TextField from "@material-ui/core/TextField";
import Box from "@material-ui/core/Box";

export default function App() {
  return (
    <div className="App">
      <Box my={3} clone>
        <TextField variant="outlined" label="Box demo" />
      </Box>
    </div>
  );
}

다음의 component소품을 사용할 수도 있습니다 Box.

import React from "react";
import TextField from "@material-ui/core/TextField";
import Box from "@material-ui/core/Box";

export default function App() {
  return (
    <div className="App">
      <Box my={3} component={TextField} variant="outlined" label="Box demo" />
    </div>
  );
}