React中textDecoration:'none'无法移除链接下划线问题求助

嗨，别着急，新手遇到这种样式不生效的情况太正常啦～我帮你分析下可能的原因和解决办法：

最可能的原因：JSS样式作用域没匹配到目标元素 #

你现在在style.jss.ts里单独写了a: { textDecoration:'none' }，但JSS默认是模块化的，这个单独的a选择器生成的样式只会作用在带有对应类名的<a>标签上，而你的<a>是嵌套在.register类的div里的，根本没应用这个样式！

正确的写法：嵌套选择器匹配子元素 #

把a的样式嵌套到register类里面，这样才能精准选中.register下的<a>标签：

// style.jss.ts
register: {
  position: 'relative',
  width:'100%',
  height:'50px',
  borderRadius:'10px',
  backgroundColor: '#f1f5fb',
  border: 'solid 1px #e6eaee',
  paddingTop:'15px',
  // 这里用& a来选中当前类下的a子元素
  '& a': {
    textDecoration: 'none',
    // 顺便可以设置下链接颜色，避免继承浏览器默认的蓝色
    color: '#333'
  }
},
// 删掉单独的a: {}哦

如果还是不行？覆盖所有链接伪类状态 #

浏览器对链接的不同状态（未访问、已访问、 hover、点击中）有默认样式，可能某一个伪类的下划线没被覆盖，试试把这些状态都写上：

'& a': {
  textDecoration: 'none',
  '&:link, &:visited, &:hover, &:active': {
    textDecoration: 'none'
  }
}

最后排查：有没有全局样式抢优先级 #

如果上面两种方法都没用，检查下项目里的全局CSS文件，有没有类似a { text-decoration: underline !important; }这样的全局样式，要是有的话，你需要用更具体的选择器，比如.register .conta a来提升优先级：

// 在register里嵌套
'& .conta a': {
  textDecoration: 'none !important'
}

按照这个步骤改，应该就能去掉下划线啦～

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