如何使用 React 将 css 添加到 ES6 中的模板文字

Question

我正在尝试在反应中使用 Material UI 步进器。

步骤的内容设置为字符串文字。

我想在步骤内容中添加CSS（用于段落）。

很多关于这个的博客文章都说 \n 应该可以制作一个 br 标签（例如：https://dev.to/sarah_chima/an-introduction-to-es6-template-literals-94l），但是当我尝试它时，\n 只是被忽略了。

如何转换：

function getStepContentResearcher(step) {
    switch (step) {
      case 0:
        return `para 1. \n para 2`;

分成两段：

function getStepContentResearcher(step) {
    switch (step) {
      case 0:
        return `para 1. 
                \n 
                para 2`;

Answer 1

在css中：

white-space: pre-line;

Answer 2

一个简单的方法是return一个数组。

case 0:
   return [`para 1.`, <br />, `para 2`];

另一种方法是使用内联组件。

case 0:
      return <>para 1. <br />, para 2</>;

第三种方式 是为 Typography 或您使用的内容提供样式 material ui makeStyles .

instructions: {
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(1),
    whiteSpace: "pre-line" //<---like this
  }

Working demo（包括所有 3 个选项）

完整代码片段

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%"
  },
  button: {
    marginRight: theme.spacing(1)
  },
  instructions: {
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(1),
    whiteSpace: "pre-line"
  }
}));

function getSteps() {
  return ["Select campaign settings", "Create an ad group", "Create an ad"];
}

function getStepContent(step) {
  switch (step) {
    case 0:
      return [`para 1.`, <br />, `para 2`];
    case 1:
      return (
        <>
          para 1. <br />, para 2
        </>
      );
    case 2:
      return `This is the bit \n I really care about!`;
    default:
      return "Unknown step";
  }
}

如何使用 React 将 css 添加到 ES6 中的模板文字

How to add css to template literals in ES6 with react

javascript

reactjs

ecmascript-6

material-ui

template-literals