前端样式穿透

Vue

• 想要样式穿透，就得在 style 中加上 scope
• 不能往组件根节点加样式穿透，会失效
• 统一一下，Vue3 中统一用 :deep(xxx)
• 在 Vue2 中，sass 用 ::v-deep；less 用 /deep/

相关链接：
https://vue-loader.vuejs.org/zh/guide/scoped-css.html#深度作用选择器
https://stackoverflow.com/questions/48032006/how-do-i-use-deep-or-or-v-deep-in-vue-js

React

.test {
  // 这里要加 :global {} 才能进行样式穿透
  :global {
    .one {
      color: cornflowerblue;
    }
  }
}

// 在 vite 搭建的 react 应用中，命名方式需为 xxx.module.less
import styles from './index.module.less'

const One = () => {
    return (
        <div>
            {/* 注意，这里若写成 styles.one，就做不了样式覆盖了，因为它是会生成随机字符串的，也就是哈希值 */}
            <div className="one">one</div>
        </div>
    )
}
export default function App() {
  return (
    <>
        <div className={styles.test}>
            <One />
        </div>
    </>
  )
}