reactjs - 在 React + Material UI 中使用 prop 作为类名

Question

我有一个简单的 React 组件，它应该带有一个status道具。的值可以是initialized,connected或disconnected

基于这个道具的值，我想添加一个同名的 CSS 类，同时使用材料 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);

标签： reactjsmaterial-ui

Answer 1

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

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>