react 中样式引用总结

1.外部样式引入（外联样式）

1. 页面中引入html中引入（注：react中类名用className）
   
   2.组件中引入
   import ‘./style/common.less’;
   

2.内联样式

1.在HTML页面中，样式只用放在标签中

<style>
        .aa{
                 background:#ccc;
           }
 </style>

2.在组件中使用内联样式

注：下面组件中style的属性是用 { }包裹的，样式名称的书写采用驼峰式命名。例如：font-size要改成fontSize这样的，样式值是字符串型的
也可以写成行内样式 <div style={{color:‘red’,fontSize:‘30px’}}>{this.props.children} xxx

render(){
        let bb = {
            color:'red',
            fontSize:'30px'
        };
        return (
            <div>
                main 页面 
                <div className="aa" style={bb}>{this.props.children} xxx</div>
                <style>
                    {
                        `
                        .aa{
                            background:#ccc;
                        }
                        `
                    }    
                </style>
            </div>
        );

注：这里的style样式是写在组件内部render方法内的 最外层需要有一个div包裹，并且，style标签内是一对花括号{ }花括号内是一对``（就是数字键1 tab键上边那一个）然后才是样式。