如何在物料界面中插入变量类名？
如何在物料界面中插入变量类名？
提问于 2021-01-19 23:42:57
我正在尝试创建一个组件，它有一个不同的颜色背景取决于数据。为此，我需要一个变量类，但我不能让它工作，希望能得到一些帮助。
我只想要一个类来表示ragR、ragA或ragG (所以最后一个字母是变量)。
下面是我的代码：
import React from 'react';
const useStyles = makeStyles(theme => ({
ragChip:{
padding: 2,
},
ragR: {
backgroundColor: theme.palette.error.dark,
},
ragA: {
backgroundColor: theme.palette.warning.dark,
},
ragG: {
backgroundColor: theme.palette.success.dark,
},
}));
const getRAG = ragStatus => {
const rag = ragStatus.toString().toUpperCase();
if (
rag === 'RED' ||
rag === 'AMBER' ||
rag === 'GREEN' ||
rag === 'R' ||
rag === 'A' ||
rag === 'G'
)
return rag.charAt(0);
return 'U';
};
const RAGChip = ({ ragStatus }) => {
const classes = useStyles();
return (
<Chip
size="small"
label=''
className={`${classes.ragChip} ${classes.rag ${getRAG(ragStatus)}}`}
/>
);
};
export default RAGChip;非常感谢您的帮助！
凯蒂
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-19 23:52:56
我认为你需要做的是：
const getRAG = (ragStatus) => {
const rag = ragStatus.toString().toUpperCase();
if (rag.startsWith("R") || rag.startsWith("A") || rag.startsWith("G")) {
return rag[0];
}
return "U";
};
const RAGChip = ({ ragStatus }) => {
const classes = useStyles();
const defineClass = `rag${getRAG(ragStatus)}`;
return (
<Chip
size="small"
label=""
className={`${classes.ragChip} ${classes[defineClass]}`}
/>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65794761
复制相关文章
相似问题
腾讯云开发者
