Лучший способ использовать систему материалов со стилизованными компонентами

Question

Я пытаюсь использовать стек, приведенный выше, для настройки компонентов Материала с помощью свойств, предоставляемых системой Материалов (соединение с компонентами стиля). Компонент, который я тестирую:

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

import { spacing, sizing, color, flexbox, display } from '@material-ui/system'
import styled from 'styled-components'

const Row = styled(props => <Grid container {...props} />)`
  ${spacing}
`

export default Row

Все на экране работает очень хорошо, но ошибка на консоли появляется каждый раз, когда я использую опору материальной системы. Пример:

<Row maxWidth='200px'>...</Row>

на консоли появляется следующая ошибка:

Предупреждение: React не распознает maxWidth prop на элементе DOM. Если вы намеренно хотите, чтобы он отображался в модели DOM как настраиваемый атрибут, используйте вместо этого строчные буквы maxwidth. Если вы случайно передали его из родительского компонента, удалите его из элемента DOM.

Я знаю, что ...props передает maxWidth компоненту Grid (и это элемент html) , но я не понимаю, как использовать его без этого журнала консоли

Answer 1

Документация Material-UI показывает примеры различных подходов к стилизации, включая пример, показывающий, как использовать styled-components с Material-UI.

Вот их пример:

import React from 'react';
import { styled } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const MyButton = styled(Button)({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  border: 0,
  borderRadius: 3,
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  color: 'white',
  height: 48,
  padding: '0 30px',
});

export default function StyledComponents() {
  return <MyButton>Styled Components</MyButton>;
}

Другой подход заключается в использовании хука Material-UI, который использует подход CSS -in- JS и функцию makeStyles:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

Также есть способ создать пользовательскую тему в отдельном файле и импортировать ее туда, где это необходимо. Вот пример объекта по умолчанию Theme и того, что он содержит. Хорошо бы взглянуть и получить представление о том, что можно настроить с помощью createMuiTheme.

Material-UI имеет несколько подходов к стилизации, и поначалу это может быть много. Надеюсь, это поможет.

Answer 2

Давайте разделим, какие именно реквизиты используются для стилизации, а какие реквизиты отправляются в компонент Grid. Используя rest , мы можем «извлечь» определенные свойства из объекта props и отправить rest компоненту Grid. Затем извлеченные нами свойства сформируют CSS.

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

import { spacing, sizing, color, flexbox, display } from '@material-ui/system'
import styled from 'styled-components'


const Row = styled(
  ({ maxWidth, somethingElse, ...rest }) => <Grid container {...rest} />
)`
  ${spacing}
  maxWidth: ${props => props.maxWidth || defaultValue1};
  somethingElse: ${props => props.somethingElse || defaultValue2};
`;

export default Row

Answer 3

танков много об анвсорах. Основываясь на этих ответах, я разрабатываю помощник для разделения таких опор:

import React from 'react'
import styled from "styled-components";
import Button from "@material-ui/core/Button";
import { spacing, sizing } from "@material-ui/system";

const allowedProps = ({props, system}) => {
    const notAllowedProps = filterProps({props, system})
    const allowedProps = Object.entries(props).reduce((acc, [key, value]) => {
        if (!notAllowedProps.includes(key)) {
            return {...acc, [key]: value}
        }
        return acc
    }, {})
    return allowedProps
}

const filterProps = ({props, system}) => {
    const objSystem = system.reduce((acc, element) => ({
        ...acc,
        ...element(props)
    }), {})
    return Object.keys(objSystem)
}

const ButtonBase = (props) => <Button {...allowedProps({props, system: [spacing, sizing]})} />

const MyButton = styled(ButtonBase)...