[React] inline style !important 적용 방법

React inline style !important 적용

React 에서는 내부 스타일 설정 시 !important 적용이 안됨

해결 방법으로는 크게 3가지가 있음

 

1. css 파일에 선언해주기

 

2. 부트스트랩을 사용해 className값 설정하기

 

3. inline에 style을 줘야한다면 style 메서드 정의해서 사용하기

참고로 리액트에서는 !important를 사용하는것을 권장하지 않음

import React from 'react';

const MyComponent = () => {
  const importantStyle = {
    color: 'red !important',
    fontSize: '20px', // 다른 스타일 속성은 그대로 작성
  };

  return (
    <div style={importantStyle}>
      Hello, World!
    </div>
  );
};

export default MyComponent;