使用 CSS 为我的 React JSX 渲染元素的某些部分设置样式答案

【问题标题】：Styling some parts of my React JSX rendered elements with CSS使用 CSS 为我的 React JSX 渲染元素的某些部分设置样式
【发布时间】：2021-04-01 23:56:52
【问题描述】：

我在我的小型反应项目中映射了一组数据，以将数据的内容呈现到浏览器中。但我的问题是我需要对这些渲染内容的某些部分进行样式化，而不是全部。我应用的每个 CSS 属性都适用于所有 P 标签。例如，在下面的代码中，样式将适用于Was，适用于第二项中的Birthday，依此类推......

下面是我的 CSS 代码。

import React from "react";
import "./styles.css";

export default function App() {
const data = [
  {
    details: 'Yesterday was his birthday'
  },
  {
    details: 'Today is my birthday'
  },
  {
    details: 'I cant\'t remember my birthday date'
  }
]

  return (
    <div className="App">
      <h1>I need Help</h1>
      <h2>Please How do i style some parts of my rendered details</h2>
      {
        data.map((detail)=>(
          <p>{detail.details}</p>
        ))
      }
    </div>
  );
}

【问题讨论】：

标签： javascript css reactjs sass styles

【解决方案1】：

您可以将highlight 属性添加到您的数组元素中，并通过该属性拆分句子。然后，将拆分后的词放在自己的span 之间。

export default function App() {
const data = [
  {
    details: 'Yesterday was his birthday',
    highlight: 'was'
  },
  {
    details: 'Today is my birthday',
    highlight: 'birthday'
  },
  {
    details: 'I cant\'t remember my birthday date',
    highlight: 'date'
  }
]

  return (
    <div className="App">
      <h1>I need Help</h1>
      <h2>Please How do i style some parts of my rendered details</h2>
      {data.map((datum) => {
        const pieces = datum.details.split(datum.highlight);
        return (
          <p key={datum.details}>
            {pieces[0]}
            <span style={{ backgroundColor: "#FF0" }}>{datum.highlight}</span>
            {pieces[1]}
          </p>
        );
      })}
    </div>
  );
}

【讨论】：

请您的解决方案适用于所有元素。我想要的只是 p 标签的一部分，而不是 p 标签的所有单词。
@OluwafemiAkinyemi 我更新了我的答案，这应该可以满足您的需求！

【解决方案2】：

有很多方法可以解决这个问题。然后@Nick 建议的一个是不错的。您也可以查看我的建议。

export default function App() {
const data = [
  {
    details: 'Yesterday was his birthday',
    css: true
  },
  {
    details: 'Today is my birthday',
    css: false
  },
  {
    details: 'I cant\'t remember my birthday date',
    css: false
  }
]

  return (
    <div className="App">
      <h1>I need Help</h1>
      <h2>Please How do i style some parts of my rendered details</h2>
      {
        data.map((detail)=>(
          <p className={detail.css ? 'my-custom-class' : ''}>{detail.details}</p>
        ))
      }
    </div>
  );
}

使用这种方法，您将不会拥有<p class="undefined">...</p>

【讨论】：

undefined 在 React 中不是这样工作的。 className={undefined} 实际上会导致 DOM 元素根本没有 class 属性，这是所期望的。我绝对不建议将其设置为空字符串，否则您最终会在呈现的 HTML 中使用 class=""。
这两个解决方案都不错，但我真正想要的是类似的东西。我喜欢 Football/> 样式将仅适用于第一个标签中的足球