!react에서 중요한 인라인 스타일

!react에서 중요한 인라인 스타일

!important override를 사용하여 인라인 스타일을 추가하는 방법이 있습니다.

style={
  height: 20+'!important'
};

<div style={style}></div>

이건 내가 기대했던 대로 되지 않는다.

리액트는 이 기능을 지원하지 않는 것 같습니다.하지만 내가 조사를 하면서 해킹을 당했어

    <div ref={(node) => {
      if (node) {
        node.style.setProperty("float", "right", "important");
      }
    }}>                    
    </div>

행운을 빈다:)

20+'!important'이'20!important'.

숫자만 지정하면 react에 의해 "px"가 추가됩니다.단, 문자열을 사용하고 있기 때문에 단위를 지정해야 합니다.또, 「!important」와 그 왼쪽에 있는 「!important」 사이에는 공백이 필요하게 됩니다.

style={{ height: '20px !important' }};

다른 CSS 속성에 대해 보다 깔끔하고 일관성 있는 방법을 사용하는 것이 좋습니다.

ref={(el) => el && el.style.setProperty(<property>, <value>, "important")}

이게 도움이 됐으면 좋겠네요!

이게 내가 리액트 16을 작동시킬 수 있는 유일한 방법이야.

const id="unique_id"; 
<React.Fragment>
    <style>
      {`
#${id} {
  background-color: transparent !important;
}
      `}
    </style>
    <Frame id={id} />
</React.Fragment>

스타일링된 컴포넌트를 사용하는 것이 좋습니다.!important스타일 소품이 지원하지 않기 때문에!important아마 앞으로는 안 그럴 거예요

다음으로 Semantic-UI를 덮어쓰는 예를 나타냅니다.padding에grid columns. 사실 이 부분은 빼도 됩니다.!important'특정성 강화'로 충분하기 때문입니다.

const StyledColumn = styled.div(({size}) => ({className: `${size} wide column`})`
    &&&&& {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }
`
<StyledColumn size="three"></StyledColumn>

&&&&&&&&&&&&&&&&&&&&&&&&&&&-

이것은 원래 위의 Daniel에 의해 답변되었습니다.훅으로 작업하기 위해 그의 답변을 수정하기 위해 나의 답변을 공유하고 싶을 뿐이다.

1. 참조의 정의const ref = useRef(null);
2. 원하는 노드에 참조 추가(예: div, table)<div ref={ref}></div>
3. 이 코드 추가ref.current.style.setProperty(<property>, <value>, "important")내부 useLayoutEffect

아래 샘플 코드를 참조하십시오.

import React, { useRef, useLayoutEffect } from "react";


const SampleComponent = () => {

   const ref = useRef(null);

   useLayoutEffect(() => {
    ref.current.style.setProperty("border-top", "0px", "important");
  }, []);

   return (
      <div ref={ref}>
         {/* additional codes here */}
      </div>
   )
}

주의:

• 속성은 CSS 형식입니다(예: "border-top").

네, 이 방법을 알게 된 것은 위에서 이미 언급한 바와 같습니다.

const styles = (theme: any) => ({
    panelSize: {
        height: 480,
        width: 360,
    },
    progress: {
        height: '120px !important', 
        margin: theme.spacing.unit * 2,
        width: '120px !important'
    }
});

폭에 대해 위의 제안을 시도해 봤지만 효과가 없었습니다.

저는 style.css 파일을 만들고 width: 100%!를 클래스에 추가한 후 이 파일을 컴포넌트에 Import하여 이 클래스를 호출하면 동작합니다.

코드 단축을 위한 현대적 구문을 사용한 슬릿한 임시변통:

<div ref={(node) => 
        node?.style.setProperty("float", "right", "important")
    }>                    
</div>

className 소품 설정으로 해결했습니다.

.height {
    height: 20px !important;
}

className={ styles.height }

다음과 같은 방법으로 해결할 수 있었습니다.

style={
  height: `20px ${" !important"}`
};

<div style={style}></div>

프로그램을 실행할 때 브라우저가 해당 공간을 계속 삭제했기 때문에!important 앞에 공간을 추가해야 했습니다.

언급URL : https://stackoverflow.com/questions/23074748/important-inline-styles-in-react