Day 26 - styled-components 笔记1

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;