Способ установить тип со стилем в MaterialUI

Question

@material-ui/styles поддерживает следующий способ переопределения стилей по умолчанию:

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


const StyledBox = styled(Box)({
  color: 'red'
});

По умолчанию Box похож на <div />, и я могу изменить его, передав component реквизиты:

// somewhere in code
<StyledBox 
  component="span" 
>
  Some text
</StyledBox>

И этот пример не работает:

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


const StyledBox = styled(<Box component="span" />)({
  color: 'red'
});

Есть ли способ сделать определение компонента для Box на этапе моделирования, используя styled?

Answer 1

Ниже приведен пример, показывающий, как это сделать. Вы не можете передать <Box component="span" /> (элемент) в styled, потому что он ожидает тип компонента, а не элемент (то есть экземпляр компонента). Вместо этого вам нужно создать новый тип компонента (SpanBox в приведенном ниже примере), который переносит Box и проходит через любые реквизиты или ссылки при указании реквизитов, которыми вы хотите управлять (например, component="span").

import React from "react";
import Box from "@material-ui/core/Box";
import { styled } from "@material-ui/core/styles";

const StyledBox = styled(Box)({
  color: "red"
});

const SpanBox = React.forwardRef(function SpanBox(props, ref) {
  return <Box ref={ref} component="span" {...props} />;
});
const StyledSpanBox = styled(SpanBox)({
  color: "purple"
});

export default function App() {
  return (
    <div className="App">
      <StyledBox>red div 1</StyledBox>
      <StyledBox>red div 2</StyledBox>
      <StyledSpanBox>purple span 1</StyledSpanBox>
      <StyledSpanBox pl={3} border={1}>
        purple span 2
      </StyledSpanBox>
    </div>
  );
}