!Estilos en línea importantes en reaccionar

¿Hay alguna manera de agregar estilos en línea con la anulación importante?

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

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

Esto no está funcionando como hubiera esperado.

Aparentemente, React no es compatible con esto. Pero obtuve este truco mientras investigaba.

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

Buena suerte:)

20+'!important' es '20!important'.

Cuando solo das un número, react agrega “px” por ti; pero está utilizando una cadena, por lo que debe especificar la unidad. También estoy bastante seguro de que debe haber un espacio entre “! importante” y lo que esté a la izquierda.

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

Un buen truco que es más limpio y consistente para otras propiedades de CSS:

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

¡Espero que esto ayude!

Esta es la única forma en que podría hacer que funcione con React 16.

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

recomiendo usar componentes con estilosi tiene una buena razón para hacer uso de !importantya que los accesorios de estilo no son compatibles !important y probablemente no en el futuro.

Aquí hay un ejemplo donde sobrescribimos Semantic-UI’s padding en grid columns. De hecho, puede omitir el !important como “aumentando la especificidad” es suficiente.

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

&&&&&&&

Esto es originalmente respondido por Daniel arriba. Solo quiero compartir mi respuesta mientras refactorizo ​​su respuesta para que funcione con ganchos.

1. Definir referencia const ref = useRef(null);
2. Agregue ref a su nodo deseado (por ejemplo, div, tabla) <div ref={ref}></div>
3. Agrega este código ref.current.style.setProperty(<property>, <value>, "important") dentro useLayoutEffect

Consulte los códigos de ejemplo a continuación.

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>
   )
}

Nota:

• la propiedad está en formato CSS (por ejemplo, “border-top”)

Sí, la forma en que encontré hacer esto fue la que ya se mencionó anteriormente:

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