在来自 ReactJS 中的动态 json 对象的 Material UI 组件中使用 className 添加 CSS 样式

Question

我有一个包含按钮元素的动态 json 对象。我正在使用 createElement 和材质 UI 来呈现对象数据。

我想在按钮组件中使用 className 来应用可定制的 CSS，但我无法实现。 那么，如何在运行时将 CSS 应用到材质 UI 组件？

这是我的代码 sn-p：

import React, { useState } from "react";
import './App.css';
import { Button, Grid, Checkbox, TextField, Switch, Link } from '@mui/material';



const KeysToComponentMap = {
    button: Button,
    grid: Grid,
    checbox: Checkbox,
    text: TextField,
    switch: Switch,
    link: Link
};


const RenderCard = (props) => {



    const SampleData =
        [
            {
                "type": "button",
                "display": "RELEASE THE BATCH",
                "key": "RS",
                "class": "btn",
                "value": [
                    {
                        "type": "button",
                        "display": "CONFIRM AND SUBMIT",
                        "key": "key1",
                        "value": "post"
                    }
                ]
            },
            {
                "type": "button",
                "display": "RELEASE THE OBSERVATION",
                "key": "RO",
                "value": [
                    {
                        "type": "input",
                        "display": "Observation",
                        "key": "key8",
                        "value": "val1"
                    },
                    {
                        "type": "button",
                        "display": "Done",
                        "key": "key9",
                        "value": [
                            {
                                "type": "button",
                                "display": "CONFIRM AND SUBMIT",
                                "key": "key10",
                                "value": "post"
                            }
                        ]
                    }
                ]
            }
        ]

    }




    return (
        <>{

            
                {SampleData.map((item, index) => {
                    console.log(item.type);
                    console.log(item.class)
                    
                    if (typeof KeysToComponentMap[item.type] !== "undefined") {
                        
                        return (
                            React.createElement(
                                KeysToComponentMap[item.type],
                                {
                                    onClick: () => { onButtonHandler(item, item.key) },
                                    variant: "contained",
                                    type: "input",
                                    className: KeysToComponentMap[item.class],
                                    
                                },
                                
                                item.display &&
                                (typeof item.display === "string"
                                ? item.display
                                : item.value.map(c => ActivityDetail(c)))
                            ))
                            
                    }
                    
                })} 
                
        }
            
        </>)
}

export default RenderCard;

Answer 1

原问题：

您的问题不是没有应用className，而是您尝试从KeysToComponentMap (KeysToComponentMap[item.class]) 分配的值正在返回undefined。我必须修改您的代码，并将 class 属性添加到您的示例 JSON 中，以使其正常工作，因此您可能希望根据需要进行更改：

{
  onClick: () => {
    onButtonHandler(item, item.key);
  },
  variant: "contained",
  type: "input",
  className: item.class // Changed from `className: KeysToComponentMap[item.class]`
},

工作代码沙盒：https://codesandbox.io/s/classname-cjlqo?file=/demo.js

评论中的问题：

如果我想直接传递样式而不是类名，那么在 示例 JSON 中的样式属性应采用什么格式。我路过 json 中的样式如： [{"style": "color: 'red'"}] 但这是错误的方式 这就是为什么不工作。那么，正确的做法是什么？

由于您使用的是 MUI 5，因此传递内联样式的正确道具是 sx。您可能希望通过直接传递每个组件可能需要的任何附加属性并将它们直接传播到组件中来使您的配置更加灵活。例如：

// Sample config:
{
  type: "button",
  display: "RELEASE THE BATCH",
  key: "RS",
  className: "my-button",
  sx: { color: "blue" },
  value: [
    {
      type: "button",
      display: "CONFIRM AND SUBMIT",
      key: "key1",
      value: "post"
    }
  ]
},


// Renderer
    <>
      {SampleData.map(({ type, key, display, value, ...rest }, index) => {
        console.log(type);

        if (typeof KeysToComponentMap[type] !== "undefined") {
          return React.createElement(
            KeysToComponentMap[type],
            {
              onClick: () => {
                onButtonHandler(item, key);
              },
              variant: "contained",
              type: "input",
              ...rest
            },

            display &&
              (typeof display === "string"
                ? display
                : value.map((c) => ActivityDetail(c)))
          );
        }
      })}
    </>

className 和 style 的工作示例：https://codesandbox.io/s/style-e4inc?file=/demo.js