小编tmc*_*tmc的帖子

我正在使用旧版本的 material-ui，无法升级。

我正在尝试根据道具的一些组合更改 Paper 组件的背景。我认为要求使用 makeStyles HOC 并不复杂。这可能吗？

我认为问题出在这一行：classes={{ root:correctBackgroundColor.root }}

但是https://v0.material-ui.com/#/components/paper上的文档无益地说“其他属性（未记录）应用于根元素。”

import React from "react";

const correctBackgroundColor = {
  root: {
    width: 30,
    height: 30,
    border: "1px solid lightgrey",
    backgroundColor: props => {
      if (props.ledIsOn === true && props.ledColorType === "Green") {
        return "#00FF00";
      }
      if (props.ledIsOn === true && props.ledColorType === "Orange") {
        return "#FFA500";
      } 
    }
  }
};

class ColorChange extends React.Component {
  render() {
    const { classes } = this.props;
    let textToRender = ( …

我正在创建一组使用 CSS 进行样式设置的可重用组件（包装材料用户界面）。我需要通过传递给自定义按钮的道具动态设置组件的宽度。

我想使用类名来合并为 MyButton 定义的 const 根样式（我已经在沙箱中将其剥离了，但它设置了颜色、图标等）和可以根据传入的道具定义的动态 sizeStyle。

  const sizeStyle: JSON =  { minWidth: "300px !important"};


  //always apply the buttonstyle, only apply the size style if a width prop has been supplied
  const rootStyle: Object = classNames({
    buttonStyle: true,
    sizeStyle: props.width
  ///});   

我不明白为什么样式没有应用于页面上有一个道具通过的第一个按钮 - 我可以在控制台上看到应该应用这两种样式。

沙盒在这里：https : //codesandbox.io/s/css-styling-custom-muibutton-width-as-prop-36w4r

TIA