Q_Q ..

styled.div

產生一個 div，寫 css style，放進變數裡變成 component 使用

命名習慣 Styled+誰

import styled from 'styled-components'
import { ReactComponent as Logo } from '../../images/logo/logo/.svg'

// components 命名要大寫開頭
const StyledDiv = styled.div`
    color: red;
`;

// 本來就有的組件，就用()包起來，餵樣式
const StyledLogo = styled(Logo)`
    fill: orange;
`;

const HomeSection= () => {
    return (
        <section>
          // inline-style
          <div style={{ color: 'red' }}> this is txt </div>
          // 等同於 styled-components
          // 實際會被轉成 <div class="sc-xxx xxxx">this is txt </div>
          <StyledDiv>this is txt</StyledDiv>
          
          <Logo style={{ fill: 'orange' }} />
          // 等同於
          <StyledLogo>
          
        </section>
            
    )
}

export default HomeSection;