Skip to content

Latest commit

 

History

History
125 lines (87 loc) · 1.5 KB

10. 框架中的 CSS.md

File metadata and controls

125 lines (87 loc) · 1.5 KB
Raw

框架中的 CSS

  • Angular Vue React 三大框架
  • Angular Vue 内置样式集成
  • React 一些业界实践

Angular

Angular(1.x)：

  • 没有样式集成能力

Angular(2+)：

  • 提供了样式封装能力
  • 与组建深度集成

ShadowDOM：

  • 逻辑上一个 DOM
  • 结构上存在子集结构

Scoped CSS：

  • 限制了范围的 CSS
  • 无法影响外部元素
  • 外部样式一般不影响内部
  • 可以通过/deep/或>>>穿透

模拟 Scoped CSS：

  • 方案一：随机选择器（不支持）
  • 方案二：随机属性
<div abcd>
:host {
}

:host-context{h1} {

}

dev[abcd]{

}

encapsulation 属性的配置

Vue

模拟 Scoped CSS：

  • 方案一：随机选择器
    • css modules
  • 方案二：随机属性
<style scoped>
.class_name{

}
</style>

<style module>
.class_name {

}
</style>

:class="$style.class_name"

React

  • 官方没有集成方案
  • 社区方案众多
    • css modules
    • (babel)react-css-modules
    • styled components
    • styled jsx

npm run eject

<div className="title"> title </div>

css modules：

<div className={style.[title]}> title </div>

{
    loader: 'css-loader',
    options: {
        importLoaders: 1,
        modules: true   // 打开这个
    }
}

styled components：

npm insatll styled-components

const Div = styled.div`
    color: red
`
const Div2 = styled(Div)`
    color: red,
    ${() => props.big && `
        font-size: 72px;
    `}
`

<div>
    <Div> title </Div>
</div>