如何为作为Props传入的数组对象的name属性添加样式（不修改第三方NPM组件）

我来帮你搞定这个问题！你遇到的情况很常见——用.bold()得到的是带<b>标签的字符串，但第三方组件把它当成纯文本渲染了，所以才会直接显示标签代码。下面给你几个不用修改组件源码的解决方案，按推荐优先级排序：

1. 利用组件自带的自定义渲染API（最优解） #

绝大多数第三方列表类组件都会提供自定义渲染每一项的props，比如renderItem、customItem这类（具体名字要看组件文档）。如果你的MyCustomComponent有这个功能，直接在父组件里自定义渲染逻辑就行：

const myObj = [{id:1,name:"name1"},{id:2,name:"name2"},{id:3,name:"name3"}];

<MyCustomComponent
  myProp={myObj}
  renderItem={(item) => (
    // 这里可以自由设置样式，比如颜色、加粗、字体大小等
    <span style={{ color: '#ff4400', fontWeight: 'bold', fontSize: '16px' }}>
      {item.name}
    </span>
  )}
/>

这种方式最灵活，完全符合组件设计的扩展逻辑，不会有副作用。

2. 通过全局CSS定位元素（简单有效） #

如果组件没有提供自定义渲染的API，那就用浏览器开发者工具 inspect 一下渲染后的DOM结构，找到显示name的元素的类名、层级或者属性，然后写全局CSS来设置样式。

举个例子，假设渲染后每个name元素都在类名为my-custom-item__name的标签里，那你可以在全局样式文件里加：

.my-custom-item__name {
  color: #2ecc71;
  font-weight: 600;
  text-decoration: underline;
}

如果组件用了动态类名（比如CSS Modules生成的随机类），可以用更精确的层级选择器，比如：

/* 假设组件根元素有个固定的data属性 */
div[data-component="MyCustomComponent"] > .list-item > .item-name {
  color: #3498db;
}

3. 为什么.bold()没用？ #

顺便解释下你之前的尝试："name1".bold()会返回字符串<b>name1</b>，而第三方组件应该是直接用{item.name}的方式渲染纯文本，React为了安全，不会自动解析字符串里的HTML标签，所以就直接把标签代码显示出来了。如果要让HTML生效，组件得用dangerouslySetInnerHTML，但咱们不想改源码，所以这个方法pass。

内容的提问来源于stack exchange，提问作者spring00