markdown 07 - 样式组件简介

Posted 2021-05-05

# Introduction to Styling Components

- general notes


## Code Example - Adding Styling with Stylesheets

- by default no file is automatically included into the code that is created by the build workflow
- styling files need to be imported

### Component
```
import React from 'react';
// IMPORTING STYLES
import './Person.css';
 
const person = (props) => {
  return (
    // ADD CLASSNAME
    <div className="Person">
      <p>Hi! Im {props.name} and Im {props.age} years old</p>
    </div>
  );
}
export default App;
```

### CSS File
```
.Person {
  width: 60%;
  margin: 16px auto;
  border: 1px solid #eee;
  box-shadow: 0 2px 3px #ccc;
  padding: 16px;
  text-align: center;
}
```


## Code Example - Working with Inline Styles

- styling elements without an external stylesheet


```
import React, {Component} from 'react';

class App extends Component {
  state = { ... }

  render() {
    // ADDING NEW STYLE OBJECT TO RENDER METHOD
    const btnStyles = {
      backgroundColor: 'white',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer'
    }
  
    return(
      <div>
        // ADDING STYLE PROPERTY
        <button style={btnStyles}>Switch Names</button>
        ...
      </div>
    )
  }
}
export default App;
```