如何修改read-more-react组件中‘Read more’文本的颜色

方法1：使用组件内置样式props #

read-more-react组件支持通过readMoreStyle prop直接传递内联样式，你可以直接给组件添加该属性设置颜色：

<div>
  <p className="p-text" style={{ marginTop: 10 }}>
    <ReadMoreReact
       text={work.description}
       min={30}
       ideal={100}
       max={150}
       readMoreText="Read more"
       readMoreStyle={{ color: '#ff4081', cursor: 'pointer' }} // 自定义颜色及鼠标样式
     />
  </p>
</div>

方法2：通过Sass类选择器定位元素 #

打开浏览器开发者工具，找到“Read more”对应的DOM元素，查看它的默认类名（通常为read-more-react-read-more），然后在你的Sass文件中编写样式：

.p-text {
  .read-more-react-read-more {
    color: #2196f3;
    // 可添加hover交互效果
    &:hover {
      color: #1976d2;
      text-decoration: underline;
    }
  }
}

方法3：使用深度选择器（适配CSS Modules场景） #

如果你的项目使用了CSS Modules导致样式无法穿透组件，可使用深度选择器：

.p-text {
  ::v-deep .read-more-react-read-more {
    color: #4caf50;
  }
}

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