將 className 更改為使用模板文字

Question

我正在嘗試學習模板文字，我有我的項目我需要在那里使用模板文字，我有一個看起來很簡單的問題，但不知道我做錯了什么

這是有效的：

const classes = props.classes;

return (
<List
  component="div"
  data-testid="SelectionListt"

  className={classes.selectionList__sites}
>

</List>
);

我的問題是我應該如何使用模板文字來轉換該類名。

這就是我所做的：

 const classes = props.classes; return ( <List component="div" data-testid="SelectionListt" className={` ${classes + ".selectionList__sites"} `}` > </List> );

這是我的 selectionList__sites：

 selectionList__sites: { backgroundColor: "white", "&:hover": { backgroundColor: " red", color: "black", border: "1px solid yellow", }, },

英語不是我的母語，所以可能會出現錯誤。

Answer 1

模板文字內部不需要常規引號，基本上反引號之間的整個內容都作為字符串處理，除了 ${} 中的值。

假設 props.classes 是一個字符串，我會這樣寫你的 className：

className={`${classes}.selectionList__sites`}