React class & style(3)

1.先清除index.css，換成

.parent{
    color:  rgb(147, 60, 229);
}

.child{
    color: rgb(232, 150, 27);
    background-color: rgb(234, 78, 11);
}

2.接著回到App.jsx加入class

const Child = () => {
  return (
    <>
      <h3 className="child">Child Component</h3>
    </>
  )
}

const App = () => {
  return (
    <>
      <h2 className="parent">App Component</h2>
      <Child />
      <Child />
    </>
  )
}
export default App

React的class必須寫成className
3.修改Child component加入inline styles

const Child = () => {
  return (
    <>
      <h3 className="child" style={{
        backgroundColor: '#BBFFFF'
      }}>Child Component</h3>
    </>
  )
}

原css中如有-則使用小駝峰（lower camel case)
inline styles優先度大於class
參考資料
Adding styles
React JS 19 Full Course 2025 | Build an App and Master React in 2 Hours