markdown 12 - CSS模块

Posted 2021-05-05

# CSS Modules

- [deep dive](https://github.com/css-modules/css-modules)
- Can write normal CSS code and make sure that it only applies to a given component
- Uses automatically generated unique CSS class names to do this


## Enabling CSS Modules

- CSS Modules can be used without ejecting from Create React App, see [here](https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet)
- To use the full power of CSS Modules you need to eject, this can be done by doing the following:
  - run `npm eject`
  - change `{ test: /\.css$/, }` to `{ test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, modules: true, localIdentName: '[name]__[local]__[hash:base64.5]'})`
  - [ref](https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/t/lecture/12001122?start=1)


## Code Example - Using CSS Modules

- To use CSS Modules after enabling, we need to do the following:
  - change import from `import './App.css;` to `import classes from './App.css;`
  - call classes differently from `className="App"` to `className={classes.App}`; we are no longer calling the classes as strings but as properties 


### Primary Component
```
import React, {Component} from 'react';
import classes from './App.css';

class App extends Component {
  state = {
    persons: [ { ... }, { ... } ],
      showPersons: false
  }
  
  togglePersonsHandler = () => {
    const doesShow = this.state.showPersons;
    this.setState({showPersons: !doesShow});
  }

  render() {
    const style = {
      backgroundColor: 'green',
      color: 'white',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer',
    }
  
    let persons = null;
  
    if (this.state.showPersons) {
      persons = (
        <div>
          {this.state.persons.map((person, index) => {
          return <Person ... />
          })}
        </div>
      );
      style.backgroundColor = 'red';
    }
  
    let assignedClasses = [];
  
    // NOTE WE NO LONGER PUSH STRINGS I.E. CLASSES.JOIN(' ')
    // REFERRING TO THE CSS CLASSES NOT AS STRINGS BUT AS PROPERTIES IN THE CSS
    if (this.state.persons.length <= 2) {
      assignedClasses.push(classes.red);
    }
    if (this.state.persons.length <= 1) {
      assignedClasses.push(classes.bold);
    }
  
    return(
      <div className={classes.App}>
        <p className={classes.join(' ')}>Setting Class Names Dynamically</p>
        <button onClick={this.togglePersonsHandler} style={style}>Toggle Persons</button>
        {persons}
      </div>
    )
  }
}
export default App;
```


### Secondary Component
```
import React from 'react';
// no longer works: import './Person.css';
// MUST USE
import classes from './Person.css';

const person = (props) => {

  const style = {
    // adding media query
    '@media (min-width: 500px)': {
      width: '450px',
    }
  };

  return (
    // CHANGE CLASSNAME ATTRIBUTE
    <div className={classes.Person}>
      <p onClick={props.switchNameHandler}>Hi! Im {props.name}</p>
    </div>
  );
}
export default person;
```


## Code Example - Adding Pseudo Selectors

- app.js button style, remove inline and remove styles and inline
- create css class in app.css `.App button { ... }`
- create pseudo class `.App button:hover { ... }`
- bind the class name of the button in the render method i.e. within render method at the top `let btnClass = '';`
- within if statement `btnClass = classes.Red;`
- in return method on button `className={btnClass}`


```

```


## Code Example - Working with Media Queries

- add normal CSS media query to Person.css
- implementation automatic


```

```