8. 样式

src/App.js

@@ -170,6 +170,7 @@ function App() {
 
     return (
         <div className="App">
+            {/*class 类名必须为 className, 内容只能是字符串*/}
             <header className="App-header">
                 {/*<img src={logo} className="App-logo" alt="logo" />*/}
 
@@ -193,6 +194,7 @@ function App() {
                 {arr2}
 
 
+                {/*style 内联样式 必须写成对象的形式 */}
                 <div style={{display: 'flex'}}>
                     {/*事件绑定*/}
                     <button onClick={() => {

src/components/SonComponent.js

@@ -1,9 +1,12 @@
 import React from "react";
 import PropTypes from "proptypes"
-
+// 模块化 css, 后缀 .module.css
+import SonComponentCss from "./SonComponent.module.css"
 export default class SonComponent extends React.PureComponent {
     state = {
-        msg: "SonComponent Msg"
+        msg: "SonComponent Msg",
+        showChildrenBorder: true,
+        childrenClass: [SonComponentCss.children]
     }
 
     // constructor(props) {
@@ -11,6 +14,29 @@ export default class SonComponent extends React.PureComponent {
     //     console.log(props)
     // }
 
+    switchChildrenBorder = () => {
+        this.setState({
+            ...this.state,
+            showChildrenBorder: !this.state.showChildrenBorder
+        }, (state)=>{
+            this.changeChildrenClass()
+        })
+    }
+
+    changeChildrenClass = () => {
+        if(this.state.showChildrenBorder){
+            this.setState({
+                ...this.state,
+                childrenClass:[SonComponentCss.children]
+            })
+        } else {
+            this.setState({
+                ...this.state,
+                childrenClass:[]
+            })
+        }
+    }
+
     render() {
         return <div style={{border: '1px solid', width: '80%', overflow: 'auto'}}>
             子组件
@@ -22,15 +48,15 @@ export default class SonComponent extends React.PureComponent {
             <div>
                 {this.props.msg}
 
-                <div style={{margin: 'auto', border: '1px solid', width: '90%', overflow: 'auto'}}>
+                <div className={this.state.childrenClass}>
                     {this.props.children}
                 </div>
 
-                <div style={{margin: 'auto', border: '1px solid', width: '90%', overflow: 'auto'}}>
+                <div className={this.state.childrenClass}>
                     {this.props.slot2}
                 </div>
 
-                <div style={{margin: 'auto', border: '1px solid', width: '90%', overflow: 'auto'}}>
+                <div className={this.state.childrenClass}>
                     {this.props.scopeslot(<div>
                         <div>SonComponent 插槽 slot3 (作用域插槽)</div>
                         <div>
@@ -38,6 +64,10 @@ export default class SonComponent extends React.PureComponent {
                         </div>
                     </div>)}
                 </div>
+
+                <div>
+                <button onClick={this.switchChildrenBorder}>切换边框显示</button>
+                </div>
             </div>
         </div>
     }

src/components/SonComponent.module.css

@@ -0,0 +1,6 @@
+.children {
+    margin: auto;
+    border: 1px solid;
+    width: 90%;
+    overflow: auto
+}