Могу ли я установить динамическое c имя класса в React Jss с разрушением

Question

Я использую что-то вроде этого <span className={`${status_icon} ${classes[`${status}`]}`} />, но я хочу разрушить объект и использовать его. Есть ли способ сделать это?

В настоящее время у меня есть

const classes = useStyles();  
const { status_icon } = classes;

Я хочу использовать это так

const {status_icon, learning_in_progress, not_started} = useStyles();

Исходный код - CodeSandBox

import React from "react";
import { createUseStyles } from "react-jss";

export default function App() {
  return (
    <>
      <h3>
        <LearnGridStatus status="not_started" />
        Not Started
      </h3>

      <h3>
        <LearnGridStatus status="learning_in_progress" />
        In Progress
      </h3>
    </>
  );
}

function LearnGridStatus({ status }) {
  const styles = {
    status_icon: {
      display: "inline-block",
      marginRight: "8px",
      width: "15px",
      height: "15px",
      verticalAlign: "middle",
      borderRadius: "50%"
    },
    not_started: {
      background: "#6a7887"
    },
    learning_in_progress: {
      background: "#3dc3ff"
    }
  };

  const useStyles = createUseStyles(styles);
  const classes = useStyles();
  const { status_icon } = classes;

  return (
    <span className={`${status_icon}  ${classes[`${status}`]}`} />
  );
}

Answer 1

Да, вы можете использовать Имена вычисляемых свойств :

const styles = {
  status_icon: {
    display: "inline-block",
    marginRight: "8px",
    width: "15px",
    height: "15px",
    verticalAlign: "middle",
    borderRadius: "50%"
  },
  not_started: {
    background: "#6a7883"
  },
  learning_in_progress: {
    background: "#3dc3ff"
  }
};

const useStyles = createUseStyles(styles);

function LearnGridStatus({ status }) {
  const { status_icon, [status]: currentStatus } = useStyles();

  return <span className={`${status_icon}  ${currentStatus}`} />;
}

Рабочий пример: