在 React + Material UI 中使用 prop 作为类名答案

【问题标题】：Using prop as class name with React + Material UI在 React + Material UI 中使用 prop 作为类名
【发布时间】：2020-09-03 08:24:41
【问题描述】：

我有一个简单的 React 组件，它应该采用 status 属性。其中的值可以是initialized、connected或disconnected

基于这个属性的值，我想添加一个同名的 CSS 类，同时使用 Material-UI 样式。

我有这样的东西，它为元素提供类名，但它与 MaterialUI 生成的类名不匹配

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';

const styles = {
  root: {
    height: '2px'
  },
  initialized: {
    backgroundColor: 'orange'
  },
  connected: {
    backgroundColor: 'green'
  },
  disconnected: {
    backgroundColor: 'red'
  }
};

class CableStatus extends React.PureComponent {
  render() {
    const { classes, status } = this.props;

    return (
      <div className={classes.root + ' ' + status}>
      </div>
    );
  }
}

CableStatus.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CableStatus);

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我认为您应该像这样设置所需的类：

let statusClass = classes[status];
<div className={`${classes.root} ${statusClass}`}></div>

【讨论】：

使用双引号时是否有效。我认为您应该使用模板字符串。应该是：<div className={`${classes.root} ${statusClass}`}></div>

【解决方案2】：

当您想在 Material UI 中使用多个类时。有两种方式：

let statusClass = classes[status]
<div className={`${classes.root} ${statusClass}`}></div>

import clsx from 'clsx'
...
let statusClass = classes[status]
<div className={clsx(classes.root, statusClass)}></div>

【讨论】：