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;