React中如何在行内样式的style标签内使用CSS选择器修改元素样式

问题原因分析 #

你写的全局<style>规则未覆盖导航栏元素，核心是样式优先级冲突：导航栏元素本身绑定了更高优先级的样式（比如第三方UI库内置样式、组件内局部样式、行内style属性），你的低优先级全局规则被覆盖了。

不同场景的实现方法 #

1. 全局统一设置p、a标签样式 #

如果需要全站生效，直接在<style>标签内写多条规则即可，要覆盖高优先级样式可以调整选择器权重：

<style>
{`
/* 全局p标签样式 */
body p {
  color: white;
}
/* 全局a标签样式 */
body a {
  color: #409eff;
  text-decoration: none;
}
/* 针对性覆盖导航栏样式，F12查看导航栏容器的类名替换下面的.nav-wrap即可 */
body .nav-wrap p, 
body .nav-wrap a {
  color: white;
}
`}
</style>

如果还是不生效，可以临时加!important测试规则是否能匹配到元素，确认匹配后再调整选择器权重避免滥用!important。

2. 组件局部生效的样式方案 #

如果不需要全局生效，只想在当前组件内给p、a标签设置样式，不推荐直接写全局<style>，优先用以下两种React生态常用方案：

方案一：CSS Modules

• 给当前组件新建xxx.module.css文件，写入样式规则：

p {
  color: white;
}
a {
  color: #409eff;
}

• 组件内引入后绑定到容器即可：

import styles from './xxx.module.css'

function MyComponent() {
  return (
    <div className={styles.container}>
      <p>白色文本</p>
      <a href="#">蓝色链接</a>
    </div>
  )
}

方案二：CSS-in-JS（以styled-components为例）

• 安装依赖后直接定义带样式的组件：

import styled from 'styled-components'

const WhiteP = styled.p`
  color: white;
`
const BlueA = styled.a`
  color: #409eff;
  text-decoration: none;
`

function MyComponent() {
  return (
    <div>
      <WhiteP>白色文本</WhiteP>
      <BlueA href="#">蓝色链接</BlueA>
    </div>
  )
}

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