Styling

Inline style in JSX

Instead of hyphen use camelcase

<header style={{ backgroundColor: 'orange' }}>

CSS Variables

:root {
  --color-blue: #40d4ff;
}

Put style in a variable

const headerStyles = {
    backgroundColor: 'var(--color-blue)',
    borderBottom: '6px solid white',
    color: 'black',
};

<header style={headerStyles}>

Use props

Header.jsx

const headerStyles = {
    backgroundColor: bgColor,
    borderBottom: '6px solid white',
    color: textColor,
  };

return (
    <header style={headerStyles}>
      <div className='container'>
        <h2>{text}</h2>
      </div>
    </header>
  );

App.js

<Header bgColor='var(--color-blue)' textColor='black' />

Default props

Header.jsx

Header.defaultProps = {
  text: 'Feedback UI',
  bgColor: 'var(--color-blue)',
  textColor: 'black',
};

Header.propTypes = {
  text: PropTypes.string,
  bgColor: PropTypes.string,
  textColor: PropTypes.string,
};

App.js

<Header />