인라인 스타일(inline style) 적용할 때 발생한 오류

N·2023년 1월 20일
0

현상: 페이지를 새로고침하면 문제가 없음, 다른 페이지에서 next/link로 이동해서 넘어오면 인라인으로 설정한 margin이 적용되지 않는 문제를 발견

원인: 인라인 스타일을 입력할 때 속성값 뒤에 세미콜론을 넣은것이 문제
ex) { marginRight: '5px;', marginTop: '30px;' };

import React, { useMemo } from 'react';
import { conditions } from '../../constants/conditions';

type ConditionProps = {
  condition: string;
};

export const RadioButton = ({ condition }: ConditionProps) => {
  const container = useMemo(() => {
    
세미콜론이-> return { marginRight: '5px;', 
들어감               marginTop: '30px;' };
  
  }, []);

  return (
    <div style={container}>
      <input type="radio" name="condition" style={container} />
      <label htmlFor={condition}>{conditions[condition]}</label>
    </div>
  );
};

해결: 세미콜론 삭제

profile
web

0개의 댓글

관련 채용 정보