React学习笔记-样式(二)

内联样式

import React from "react";

export default class LearnStyle extends React.Component {
  
  render () {
    return (
      <div>
        {/* 以下两种方法都可以 
        一种不用引号 将css以小驼峰方式写
        另一种加上引号 写法和css一样
        */}
        {/* 对象也是变量 所以要在外层加一个{} */}
        <div style={{color : 'red'}}>内联样式1</div>
        <div style={{'margin-top' : '20px'}}>内联样式2</div>
      </div>
    )
  }
}

css样式表

.blue {
  color: blue;
}

import React from "react";
// 引入css样式 不要忘记.css后缀
import './learn-class-name.css'

export default class LearnStyle extends React.Component {
  
  render () {
    return (
      <div>
        {/* 此方法有样式污染问题 */}
        <div className="blue">存在污染问题样式</div>
      </div>
    )
  }
}

css样式污染

原因: React最终编译打包后都在一个html页面中 如果在两个组件中取一样类名 那么后者会覆盖前者 默认情况下 只要导入了组件 不管组件有没有被使用 组件的样式都会生效

CSS Modules解决样式污染问题

CSS Modules 保证类名唯一性 从而避免样式冲突问题

/* 创建名为 learn-className.module.css 的样式文件 */
.green {
  color: green;
}

import React from "react";
// 引入learn-className.module.css的样式文件
// 引入的时候需要设置一个变量接收刚定义的css module模块
// Styles是一个对象，里面存放的就是我们定义的样式
import Styles from './learn-class-name.module.css'

export default class LearnStyle extends React.Component {
  
  render () {
    return (
      <div className="learn-style">
        {/* Styles以对象方式存在 需要用到哪个样式就用对象语法调用 */}
        <div className={Styles.green}>官方解决污染问题方法</div>

      </div>
    )
  }
}

Sass框架解决样式污染问题

a. 安装

npm install sass

b. 创建.scss文件

// 创建learn-className.scss
.learn-style {
  .yellow {
    color: yellow;
  } 
}

c. 组件中引入

import React from "react";
import './learn-class-name.scss'

export default class LearnStyle extends React.Component {
  
  render () {
    return (
      <div className="learn-style">
        {/* 此方法是比较好用的解决污染问题的方法 */}
        <div className="yellow">css框架sass解决污染问题方法</div>
      </div>
    )
  }
}