React loading style causes echarts width calculation error?

has the following react components:

import "./Home.scss";

class Home extends React.Component{
    render(){
        return (
            <div className="box clearfix">
                <div className="left">
                    <Echart style={{width: "100%", height: 300}} .../>
                </div>
                <div className="right">
                    <Echart style={{width: "100%", height: 300}} .../>
                </div>
            </div>
        );
    }
}

.left , .right each 50% , but the width of the Echarts is indeed 100% when rendering. If I write the style in the line, there will be no problem

//Home.scss
.box{
    .left, .right{
        width: "50%";
        float: left;
    }
}

so it seems that the style is not loaded when rendering Echarts, so at the beginning, the width of both left and right is 100%. How to solve this problem?

Webpack react.js javascript

Feb.28,2021

my solution uses setTimeout (() = > {Code});

part of the code is as follows

setTimeout(() => {
      let ele = document.getElementById(`chart-line-container${type}`);
      let myChart = echarts.init(ele);
      myChart.showLoading({
        text: '...',    //loading
      });
      
}, 0);

Previous: Does the official website of ant.design seem to be GG?

Next: Click again after location.hash jump is invalid

React build Times wrong: syntax error: Unexpected token (26:6)
the npm start command runs normally, but the error will be reported when executing with npm run build as follows: syntax error: Unexpected token (Unexpected token (26:6) my index.js: import React, { Component } from react ; import ReactDOM from...

Webpack react.js javascript

Feb.27,2021
The less, configuration referenced in the react project reported an error and asked for help.
the newcomer, in the process of building according to the steps on the Internet, the following error occurred: paste the configuration file about less code: webpack.config.dev.js { test: [ .css$ , .less$ ], use: [ ...

Webpack react.js javascript

Mar.18,2021
Error "target container is not a Dom Element" after using react-hot-loader?
webpack.config.js const path = require( path ) const webpack = require( webpack ) const ExtractTextWebapckPlugin = require( extract-text-webpack-plugin ) CSS const HtmlWebpackPlugin = require( html-webpack-plugin ) module.exports = { entr...

Webpack-dev-server webpack react.js javascript

Mar.28,2021
After the react project is released, users need to refresh the browser manually in order to run normally.
has MD5 value, and the packaged hash value is also different each time js changes the code, but the user must refresh the page cache to use normally....

Webpack react.js javascript

Jun.20,2022