Используйте функции стиля для компонентов пользовательского интерфейса материала помимо Box

Aug 20 2020

Я только начинаю с Material UI. Спасибо за терпение.

Я знаю, что вы можете использовать готовые вещи <Box mx={2}>(ха). Так что, если я хотел сделать поле вокруг, скажем, a TextField, я мог бы обернуть его в коробку.

Есть ли простой способ настроить тему моего приложения, чтобы любой компонент мог использовать эти свойства функций стиля? ( m, p, displayИ т.д.)

Чтобы я мог <TextField mx={2}/>без необходимости оборачивать его в Box.

В документах подразумевают , что вы можете сделать это: (в данном примере используется ThemeProviderиз , styled-componentsно я предполагая , что Муи 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

В документах показывают , как тема может параметризировать Box особенности (например , таким образом, что блок является интервал 4px вместо 8px) - тема делает ничего , чтобы включить эти функции не делает.

Material-UI намеревается поддерживать функции @ material-ui / system в основных компонентах в v5 , но до этого еще несколько месяцев.

Ваши основные параметры делают что-то вроде того, что вы показали в своем примере (хотя вам следует перейти 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>
  );
}

Связанные ответы:

  • Material-UI Grid не скрывает при использовании Display
  • Размер динамического значка в Material-UI
  • Box vs className vs style для вертикального интервала в пользовательском интерфейсе материала
  • Компонент многократного использования с использованием функций Box на основе темы
  • Использование компонента Material-UI Box с компоновкой ящика
  • Как использовать кнопку переопределения с помощью компонента Box в Material-UI?