Передача реквизита в стиле пользовательского интерфейса

данный код карты, как здесь: card

как я могу обновить стиль карты или любой стиль пользовательского интерфейса, как из

    const styles = theme => ({
    card: {
    minWidth: 275,
  },

к такому:

    const styles = theme => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

когда я попробовал последний, я получил

 Line 15:  'props' is not defined  no-undef

когда я обновляю код:

const styles = theme =>  (props) => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

также

 const styles  = (theme ,props) => ({
        card: {
        minWidth: 275, backgroundColor: props.color  },

вместо

const styles = theme => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

Я получил стиль карты компонентов на веб-странице.

Кстати, я передаю реквизит следующим образом:

<SimpleCard backgroundColor="#f5f2ff" />

пожалуйста помоги!

Ответ 1

Когда вы используете withStyles, у вас есть доступ к theme, но не к props.

Обратите внимание, что в Github есть открытая проблема с запросом этой функции, и некоторые комментарии могут указывать на альтернативное решение, которое может вас заинтересовать.

Один из способов изменить цвет фона карты с помощью реквизита - установить это свойство с помощью встроенных стилей. Я изменил исходные коды и несколько изменений, вы можете просмотреть измененную версию, чтобы увидеть это в действии.

Вот что я сделал:

Отметьте компонент с помощью backgroundColor:

// in index.js
if (rootElement) {
  render(<Demo backgroundColor="#f00" />, rootElement);
}

Используйте эту опору, чтобы применить встроенный стиль к карте:

    function SimpleCard(props) {
      // in demo.js
      const { classes, backgroundColor } = props;
      const bull = <span className={classes.bullet}>•</span>;
      return (
        <div>
          <Card className={classes.card} style={{ backgroundColor }}>
            <CardContent>
              // etc

Теперь компонент обработанной карты имеет красный (# F00) фон

Взгляните на раздел " Переопределения " документации для других параметров.

Ответ 2

Удален старый ответ, потому что в нем нет оснований для существования.

Вот что вы хотите:

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

const useStyles = makeStyles({
    firstStyle: {
        backgroundColor: props => props.backgroundColor,
    },
    secondStyle: {
        color: props => props.color,
    },
});

const MyComponent = ({children, ...props}) =>{
    const { firstStyle, secondStyle } = useStyles(props);
    return(
        <div className={'${firstStyle} ${secondStyle}'}>
            {children}
        </div>
    )
}

export default MyComponent;

Теперь вы можете использовать его как:

<MyComponent color="yellow" backgroundColor="purple">
    Well done
</MyComponent>

Официальная документация

Ответ 3

Теперь это можно сделать с помощью @material-ui/styles (все еще находящегося в альфа-версии на момент написания этой статьи), который обеспечивает синтаксис, похожий на Styled Components:

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

const useStyles = makeStyles({
  root: {
    background: props => props.color,
    "&:hover": {
      background: props => props.hover
    }
  }
});

export function MyButton(props) {
  const classes = useStyles(props);
  return <Button className={classes.root}>My Button</Button>;
}

С JSX: <MyButton color="red" hover="blue"/>

Этот код адаптирован из демо-версии, в которой используется makeStyles, но эта функциональность также доступна в других API-интерфейсах Material-UI, styled и использующих withStyles (пример).

Введение @material-ui/styles закрывает проблему, упомянутую в принятом ответе.