React :: styled-components로 컴포넌트 스타일 바꾸기 feat. 실패 예시

 

컴포넌트를 가져와서

색상을 바꾸거나, 마진을 주거나 스타일을 바꾸려고

styled-components 공식 문서를 보고

(=> https://styled-components.com/docs/basics#styling-any-component)

 

className를 넣어주는 간단해 보이는 방식인데 안됐다..

1시간에 걸친 검색, 실험을 했고 매우 작고, 치명적인 실수를 발견했다

 

 

밑의 예는

가져온 버튼 컴포넌트에 margin을 주고 싶었던 1시간의 고통

 

 

문제의 코드

 

StyledButton을 우선 만들어줬다 

Button.style.s

import 'styled' from 'styled-components'

const StyledButton = styled.button`
  background: blue;
  color: white;
  padding: 7px 14px;
  border-radius: 3px;
  border: 0;
  cursor: pointer;
`;

 

Button.jsx

import { StyledButton } from './Button.style'

export default const Button = ({ className }) => {
    return (
        <StyledButton className={className}>
          버튼
        </StyledButton>
    );
};

그리고 StyledButton을 가져왔고,

보다시피 className 잘 넣어줬다

 

마지막으로 위에서 만든 버튼을 페이지에 넣어줬다

 

Home.jsx

(보기 쉽게 styled-components도 함께)

import Button from 'components/Button'
import 'styled' from 'styled-components'

const StyledButton = styled(Button)`
  color: red;
`

function App() {
  return (
    <StyledButton />
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

 

그렇다 문제점은 바로

Button.style.js에서 만든 이름 StyledButton

그리고 여기 Home.jsx에서 만든 StyledButton과 같은 이름이라는 것.....

 

 

해결 방법은

컴포넌트 데려와서 바꾼다면 유니크한 이름으로 지어주자!

이 예시에서는

StyledButton => SubmitButton으로 바꿔줬다

Home.jsx

import Button from 'components/Button'
import 'styled' from 'styled-components'

const SubmitButton = styled(Button)`
  color: red;
`

function App() {
  return (
    <SubmitButton />
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

 

 

#Tasmania by Trevor Mckinnon