react中插入root.less无法显示背景色

Question

项目的地址

Root.js

import React, { Component } from 'react'

import EchartsTest01 from '../components/EchartsTest01.js';
import EchartsTest02 from '../components/EchartsTest02.js';
import Advertise from '../components/Advertise.js';
// import PieReact from '../components/PieReact.js';

import '../styles/root.less';

export default class Root extends Component {
    render() {
        return (
            <div>
                <EchartsTest01 />
                <EchartsTest02 />
                <Advertise />
            </div>
        )
    }
}

root.less

#myChart02 {
  background-color: black;
}

EchartsTest02.js

import React, { Component } from 'react';

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');


class EchartsTest02 extends Component{
    // 基于准备好的dom，初始化echarts实例
    componentDidMount() {// 初始化 render 之后只执行一次
        var myChart = echarts.init(document.getElementById('myChart02'));
        // 绘制图表
        myChart.setOption({
            title: { text: 'ECharts 入门示例' },
            tooltip: {},
            xAxis: {
                data: ["王子","木龙与","雪纺衫","裤子","高跟鞋","袜子","茉莉花"]
            },
            yAxis: {},
            series: [{
                name: '无限',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20, 60]
            }]
        });

    }

    render() {
        return (
            <div id="myChart02" style={{ width: 500, height: 500 }}></div>
        );
    }

}

export default EchartsTest02;

Answer 1

上图可以清晰看到，#myChart02这个div有一个内联样式background: transparent; 根据css样式选择器的权重优先级，内联样式是大于id选择器的，所以你的#myChart02 {background-color: black;}是无效的，若想有效，改为如下即可，原理很简单用比内联样式优先级更好的样式选择器。

样式选择器的权重优先级如下：

important > 内联样式 > ID > 类、伪类、属性选择器 > 标签、伪元素 > 通配符