[React] styled-components쓸때 prop보낼때

//Button.js 여기서 쓴 ${(prop)=>...} 것

import styled, { css } from 'styled-components';
import palette from '../../lib/styles/palette.js';

const StyledButton = styled.button`
 ...

  ${(props) =>
    props.fullWidth &&
    css`
      padding: 0.75rem 0 0.75rem 0;
      width: 100%;
      font-size: 1.125rem;
    `}

  ${(props) =>
    props.cyan &&
    css`
      background: ${palette.cyan[5]};
      &:hover {
        background: ${palette.cyan[4]};
      }
    `}
`;

const Button = (props) => <StyledButton {...props} />;

export default Button;

 

 

//여기서버튼적용

import Button from './Button';

const ButtonWithMarginTop = styled(Button)`
  margin-top: 1rem;
`;

function 여기서버튼적용 ()=>{
    return (<ButtonWithMarginTop
          		cyan={true}
          		fullWidth={true}
          		style={{ marginTop: '1rem' }}
        	>
          ...
        </ButtonWithMarginTop>)
}

 

"여기서버튼적용"컴포넌트에서 props 보낼때 fullWidth 라고 쓴 값 DOM에도 있다고 소문자로 바꾸래서 바꾸고,

props 보낼때 boolean표기를 ={}안에 말고 =''문자열로 표기하라고 함 

아래와 같이 수정하니 에러 메시지 사라쥠

//Button.js 여기서 쓴 ${(prop)=>...} 것

import styled, { css } from 'styled-components';
import palette from '../../lib/styles/palette.js';

const StyledButton = styled.button`
 ...

  ${(props) =>
    props.fullwidth &&
    css`
      padding: 0.75rem 0 0.75rem 0;
      width: 100%;
      font-size: 1.125rem;
    `}

  ${(props) =>
    props.cyan &&
    css`
      background: ${palette.cyan[5]};
      &:hover {
        background: ${palette.cyan[4]};
      }
    `}
`;

const Button = (props) => <StyledButton {...props} />;

export default Button;

 

//여기서버튼적용

import Button from './Button';

const ButtonWithMarginTop = styled(Button)`
  margin-top: 1rem;
`;

function 여기서버튼적용 ()=>{
    return (
    	<ButtonWithMarginTop
          		cyan='true'
          		fullwidth='true'
          		style={{ marginTop: '1rem' }}
        	>
          ...
        </ButtonWithMarginTop>)
}