web-dev-qa-db-fra.com

! styles en ligne importants dans react

Il existe un moyen d'ajouter des styles en ligne avec le! Important override?

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

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

Cela ne fonctionne pas comme je l'aurais espéré.

javascriptreactjs
19
Allan Hortle

20+'!important' est '20!important'.

Lorsque vous donnez simplement un nombre, réagir ajoute "px" pour vous; mais vous utilisez une chaîne, vous devez donc spécifier l'unité. Je suis également sûr qu'il doit y avoir un espace entre "! Important" et tout ce qui se trouve à gauche.

style={
  height: 20 + 'px !important' // 20px !important
};
9
Brigand

Apparemment React ne supporte pas cela. Mais j'ai eu ce hack comme j'ai fait mes recherches

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

Bonne chance:)

8
Daniel

C'est la seule façon de le faire fonctionner avec React 16.

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

Oui, la façon dont j'ai trouvé cela était celle déjà mentionnée ci-dessus:

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

});

0
Oswaldo

J'essaie les suggestions ci-dessus pour la largeur, mais je n'ai pas pu le faire fonctionner.

C'est ce qui fonctionne pour moi, j'ai créé un fichier style.css et ajouté dans mon cas, width: 100%! Important pour une classe, puis il suffit d'importer ce fichier dans mon composant, d'appeler cette classe et ça marche.

0
Jozcar

Je recommande d'utiliser composants stylisés , si vous avez une bonne raison d'utiliser !important, car les accessoires de style ne prennent pas en charge !important et probablement ne le sera pas à l'avenir.

Voici un exemple où nous remplaçons padding sur grid columns. Vous pouvez en fait laisser de côté le !important comme " augmenter la spécificité " est suffisant.

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

&&&&&& <- augmente la spécificité.

0
anarchist912

Il existe un autre moyen plus propre mentionné dans documentation de l'interface utilisateur matérielle qui peut être utilisé avec react pour remplacer le comportement par défaut

1- Déclarez une variable constante pour le style

const widthStyle = {
  width:10
}

2- Utilisez-le avec JSX pour le style en ligne

<div style={widthStyle}></div>
0
mohit uprim

Une bonne astuce à utiliser qui est plus propre et plus cohérente pour les autres propriétés CSS:

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

J'espère que cela t'aides!

0
Mario Saraiva