相关疑难解决方法(0)

给出如下卡片代码: 卡片

如何更新卡片样式或任何材质UI样式

    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 …

我正在使用 React 和 Material-ui，目前我正在做类似下面的代码的事情。
有没有更好的办法？

例如，是否有一个函数允许您访问组件下面的“styles”jss对象中的“props”，该对象最终使用 withStyles() 注入到组件中，而不必执行所有这些丑陋的内联样式？

import React from 'react';
import {
  MaterialComponentOne,
  MaterialComponentTwo,
  MaterialComponentThree,
} from '@material-ui/core';

function MyPureComponent(props) {
  return (
    <MaterialComponentOne
      style={
        props.type === 'secondary'
          ? {
              css_property: 'css_value1',
            }
          : {
              css_property: 'css_value2',
            }
      }
      className={props.classes.MaterialComponentOne}
      position="static"
    >
      <MaterialComponentTwo>
        <MaterialComponentThree
          style={
            props.type === 'secondary'
              ? {
                  css_property: 'css_value1',
                }
              : {
                  css_property: 'css_value2',
                }
          }
          variant="title"
          className={props.classes.MaterialComponentThree}
        >
          {props.title}
        </MaterialComponentThree>
      </MaterialComponentTwo>
    </MaterialComponentOne>
  );
}

const styles = {
  MaterialComponentOne: {
    css_property: 'css_value',
    css_property: 'css_value', …

这个问题的目的是了解幕后发生的事情。每次找到代码时，makeStyles()我都会感觉自己只是在进行纯复制粘贴，而不了解引擎盖下发生的事情。所以我想在这里发布一个问题，以便有人可以帮助我。

我已经在许多React应用程序中看到以下类型的代码。我很想知道当我们打电话给时发生了什么makeStyles()。因此，我跳入了它的定义，但我不明白它的含义。有人可以帮助我了解如何阅读/理解它。

我在这里了解的是，我正在传递一个名为的函数theme。通过该函数后，我不知道发生了什么。我也很高兴有人能帮助我解决这个问题。

// Calling makeStyles()
const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
  },
  drawer: {
    [theme.breakpoints.up('sm')]: {
      width: drawerWidth,
      flexShrink: 0,
    },
  },
  appBar: {
    marginLeft: drawerWidth,
    [theme.breakpoints.up('sm')]: {
      width: `calc(100% - ${drawerWidth}px)`,
    },
  },
  menuButton: {
    marginRight: theme.spacing(2),
    [theme.breakpoints.up('sm')]: {
      display: 'none',
    },
  },
  toolbar: theme.mixins.toolbar,
  drawerPaper: {
    width: drawerWidth,
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
}));

//definition of makeStyles()
import { Theme as DefaultTheme } from …