React 样式

2018-08-20 本文已影响0人 LengZ

React.js入门基础与案例开发 by ParryKK in imooc.com 学习笔记

内联样式

在 render 里定义

./src/js/header.js

import React from 'react';
export default class ComponentHeader extends React.Component {
  render() {
    const styleComponentHeader = {
      header: {
        backgroundColor: "#333333",
        color: "#FFFFFF",
        "padding-top": "15px",       // 原始css属性需要用引号
        paddingBottom: "15px"
      },
      //还可以定义其他的样式
    };
    return (
      <header style={styleComponentHeader.header}>
      <h1>这里是头部</h1>
      </header>
    )
  }
}

引用外部css文件

./src/css/style.css

.smallFontSize h1{
  font-size: 12px;
}

.smallFontSizeFooter h1{
  font-size: 14px;
}

./src/js/header.js, class 改成 className

import React from 'react';
export default class ComponentHeader extends React.Component {
  render() {
    return (

      <header className="smallFontSize">
        <h1>这里是头部</h1>
      </header>

    )
  }
}

需要在 ./index.html 里引用 css 文件

<!-- index.html -->
<head>
  <link rel="stylesheet" href="./src/css/style.css" />
</head>
<div id="example">123</div>
<script src="./src/bundle.js"></script>

动画、伪类(hover)不能用

内联样式中的表达式

state 引起样式的即时变化

./src/js/header.js

import React from 'react';
export default class ComponentHeader extends React.Component {
  constructor(){
    super();
    this.state ={
      miniHeader: false //默认加载的时候还是高（不是 mini）的头部
    };
  };

  switchHeader(){
    this.setState({
      miniHeader: !this.state.miniHeader
    });
  };

  render() {
    const styleComponentHeader = {
      header: {
        backgroundColor: "#333333",
        color: "#FFFFFF",

      "padding-top": (this.state.miniHeader) ? "3px" : "15px",
      paddingBottom: (this.state.miniHeader) ? "3px" : "15px"

    },
    //还可以定义其他的样式
};
return (
  <header style={styleComponentHeader.header} className="smallFontSize" onClick={this.switchHeader.bind(this)}>
  <h1>这里是头部</h1>
  </header>
  )
}
}

`CSS` 模块化

非模块化缺点
- 全局污染
- 命名混乱
- 依赖管理不彻底
- 无法共享变量
- 代码压缩不彻底

CSS 模块化插件 (npm 安装)

babel-plugin-react-html-attrs - 不需要将 class 改成 className, 解决直接从其它项目copy css 样式使用
style-loader

css-loader

在 webpack.config.js 配置 css-loader

./webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./src/js/index.js",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015'],
          plugins: ['react-html-attrs'], //添加组件的插件配置
        }
      },

      //下面是添加的 css 的 loader，也即是 css 模块化的配置方法，大家可以拷贝过去直接使用
      {
        test: /\.css$/,
        loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
      },

    ]
  },
  output: {
    path: __dirname,
    filename: "./src/bundle.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

CSS 模块导入

./src/css/footer.css

.miniFooter{
  background-color: #333333;
  color: #ffffff;
  padding-left: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.miniFooter h1{
  font-size: 15px;
}

./src/js/footer.js

import React from 'react';

// css样式导入
var footerCss  =  require("../../css/footer.css");

export default class ComponentFooter extends React.Component{
  render(){
    console.log(footerCss);
    return (

      // css样式使用
      <footer class={footerCss.miniFooter}>

        <h1>这里是页脚，一般放置版权的一些信息。</h1>
      </footer>
    )
  }
}

CSS 模版的全局和本地样式

本地样式,经过 CSS 模版导入使用

./src/css/footer.css

.miniFooter{
  background-color: #333333;
  color: #ffffff;
  padding-left: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.miniFooter h1{
  font-size: 15px;
}

或

./src/css/footer.css

:local(.miniFooter){
  background-color: #333333;
  color: #ffffff;
  padding-left: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
}

:local(.miniFooter) h1{
  font-size: 15px;
}

-   全局样式

    > `./src/css/footer.css`

    ```CSS
    :global(.miniFooter){
      background-color: #333333;
      color: #ffffff;
      padding-left: 20px;
      padding-top: 3px;
      padding-bottom: 3px;
    }

    :global(.miniFooter) h1{
      font-size: 15px;
    }
    ```

`CSS` 模块化的有点

所有样式都是 local 的, 解决了命名冲突和全局污染问题
class 名生成规则配置灵活, 可以压缩 class 名
只需引用组件的 JS 就能搞定组件的所有的 JS 和 CSS
依然是 CSS, 几乎令学习成本

`JSX` 样式于 `CSS` 样式的互换

CSS to React: https://staxmanade.com/CssToReact/

CSS

.miniFooter{
  background-color: #333333;
  color: #ffffff;
  padding-left: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.miniFooter h1{
  font-size: 15px;
}

React JSX

{
  "miniFooter": {
    "backgroundColor": "#333333",
    "color": "#ffffff",
    "paddingLeft": "20px",
    "paddingTop": "3px",
    "paddingBottom": "3px"
  },
  "miniFooter_h1": {
    "fontSize": "15px"
  }
}

React 样式

内联样式

内联样式中的表达式

`CSS` 模块化

`CSS` 模块化的有点

`JSX` 样式于 `CSS` 样式的互换

CSS to React: https://staxmanade.com/CssToReact/

React 样式框架

猜你喜欢

热点阅读

React 样式

内联样式

内联样式中的表达式

CSS 模块化

CSS 模块化的有点

JSX 样式于 CSS 样式的互换

CSS to React: https://staxmanade.com/CssToReact/

React 样式框架

猜你喜欢

热点阅读

`CSS` 模块化

`CSS` 模块化的有点

`JSX` 样式于 `CSS` 样式的互换