Notice
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

폭파할까 말까 고민중인 잡지식 메모장

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

끙끙거린 흔적

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

개피곤씨 2023. 6. 6. 23:01 
//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>)
}

 

저작자표시 비영리 변경금지

'끙끙거린 흔적' 카테고리의 다른 글

[React] useHistory나 history는 없어져서 useNavigate써야함  (0) 2023.06.07
[React] immer 불러오기 할 때 => import { produce } from '../../node_modules/immer/dist/immer';  (0) 2023.06.07
[React] styled-components 설치 오류 (설치 안될때)  (0) 2023.06.06
[React] Matched leaf route at location "/" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.  (0) 2023.06.06
[React] toolkit의 lagacy... /redux-devtool 설치  (0) 2023.03.17
'끙끙거린 흔적' Related Articles more