Блог

Главная - Вопросы по программированию - Material-UI: настройка компонента Box с помощью withStyles

Material-UI: настройка компонента Box с помощью withStyles

#reactjs #material-ui

#reactjs #material-ui

Вопрос:

Я использую для настройки компонентов MUI ярлык withStyles, но когда я делаю это с помощью Box, он выдает мне свойство «classes=[object Объект]» в DOM. Однако компонент работает должным образом с примененной настройкой.

 const SplitBoxStyle = {
  root: {
    back&roundColor: '#eaeaea',
    width: 1,
    hei&ht: 24,
    mar&inRi&ht: 5
  }
}
const SplitBox = withStyles(SplitBoxStyle)(Box)

export const () =&&t; {
  return <Box&&t;Here is styled box: <SplitBox /&&t;</Box&&t;
}

это дает HTML:

 <div class="MuiBox-root MuiBox-root-122 Styled(MuiBox)-root-87" classes="[object Object]" style="mar&in-left: 8px; mar&in-ri&ht: 15px;"&&t;</div&&t;

Так это неправильно? Или как удалить это раздражающее свойство classes?

Ответ №1:

Вот немного измененный код.

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

const SplitBoxStyle = {
  root: {
    back&roundColor: "#eaeaea",
    width: 100,
    hei&ht: 100,
    mar&inRi&ht: 5
  }
};

function SplitBox(props) {
  const { classes } = props;
  return <Box className={classes.root}&&t;Here is styled box</Box&&t;;
}

export default withStyles(SplitBoxStyle)(SplitBox);

Вот песочница для кода.

Комментарии:

1. Спасибо, я закончил на этом: const SplitBox = withStyles(SplitBoxStyle)(({классы, дочерние элементы, …реквизит }) =&&t; <Имя_класса Box={classes.root} {…реквизит}&&t;{дочерниеэлементы}</Box&&t;)

2. Я сталкиваюсь с той же проблемой, однако это решение не работает с Typescript. Компилятор выдает предупреждение о classes prop. Есть идеи, как это исправить в этом случае?

3. Просто нашел способ и добавил альтернативный ответ. 😉

Ответ №2:

При использовании TypeScript должен быть объявлен пользовательский интерфейс, позволяющий использовать classes свойство. Таким образом:

 import React from "react";
import { StyledComponentProps, withStyles } from "@material-ui/core/styles";
import { Box, BoxProps } from "@material-ui/core";

interface Props extends BoxProps, StyledComponentProps {}

function SplitBox({ classes, children, ...props }: Props) {
  return <Box className={classes?.root} {...props}&&t;{children}</Box&&t;;
}

export default withStyles(SplitBoxStyle)({
  root: {
    back&roundColor: "#eaeaea",
    width: 100,
    hei&ht: 100,
    mar&inRi&ht: 5
  }
});