css 一种用css-modules写嵌套css的技巧方法

Posted 2021-05-13

import React from 'react';
import ChildStyles from './Child.css';

class Child extends React.Component {

  render() {

    const newStyles = Object.assign(ChildStyles, this.props.classNames || {});

    return (
      <div className={ newStyles.root }>
        <p className={ newStyles.text }>Scoped Selectors</p>
      </div>
    );
  }

}

export default Child

.root {
  border-width: 2px;
  border-style: solid;
  border-color: #777;
  padding: 0 20px;
  margin: 0 6px;
  max-width: 400px;
}

.text {
  color: #777;
  font-family: helvetica, arial, sans-serif;
  font-weight: 600;
}

import React from 'react';

import Child from './Child';
import AppStyles from './App.css';

class App extends React.Component {

  render() {
    return (
      <div className={AppStyles.app}>
        <Child classNames={{
          text: AppStyles.subText
        }}/>
      </div>
    );
  }

};

export default App;

.app {
  padding: 6px 20px 30px;
}

.subText {
  composes: text from "./Child.css";
  color: red;
}