Comment changer de couleur de l'onglet actif dans Réagissent matériel-l'interface utilisateur?
Comment je peux changer la couleur de l'onglet actif?
Je veux dire, ce pink
ligne, regarder le pic.
Vous devez vous connecter pour publier un commentaire.
Bien, vous avez deux options:
Vous pouvez personnaliser le thème:
http://www.material-ui.com/#/customization/themes
Mais le plus simple serait d'utiliser le
inkBarStyle
propriété.Vous pouvez le voir dans le docs..
Exemple:
background: 'blue'
,something else: 'some other setting'
,another thing I'm not aware of
, etc)?@Risa est la solution fonctionne très bien et devrait être accepté de répondre. Mon exemple de son explication ressemble à ceci:
et les styles:
Pour le matériel-l'interface utilisateur de la version 1.0.0-bêta.36, le suivant a fonctionné pour moi:
inkBarStyle doit avoir été déprécié/remplacé par indicatorColor en v1.0
EDIT: Lien vers la v1.0 docs: https://material-ui-next.com/api/tabs/
EDIT: à la Suite de la publication de la version stable de v1.0, il semble que la solution précédente ne fonctionne plus.
Ici sont les solutions restantes:
indicator
classe. Lien vers les docs sur les remplacements. Lien vers les docs de l'Onglet composant avec CSS les classes de l'API au fond.primary
ousecondary
couleur intentions. Vous pouvez ensuite spécifier votre choixprimary
ousecondary
de couleur pour être utilisé avec leindicatorColor
attribut mentionné ci-dessus. Lien vers les Docs.Classes remplace peut-être l'option plus facile. Vous devez utiliser le
withStyles
composant afin d'injecter de votre style personnalisé classes. La raison étant que la bibliothèque du style va remplacer vos classes ou de style-composants. Les docs ci-dessus fournissent un excellent exemple.Failed prop type: Invalid prop indicatorColor of value #FFF supplied to Tab, expected one of ["secondary","primary"]
Bien que c'est une assez vieille question, il toujours obtenir un peu d'attention et, pour ceux d'entre nous qui sont à l'aide de multiples et très personnalisée thèmes, c'est une corvée. J'ai une meilleure solution qui vous permettra de personnaliser de différentes couleurs selon le thème
Tout d'abord, créez une classe, vous pouvez crochet en l'ajoutant les Onglets de la composante de cette façon
Gardez à l'esprit, mes onglets et vos onglets peuvent être différentes, donc faire attention à la seule className ligne. Vous pouvez le nommer comme vous le souhaitez. 1. Si vous voulez avoir les différents onglets différent souligner, nom il quelque chose de significatif, comme un tableau de bord onglets si les onglets sont dans le tableau de bord ou quickpanel-onglets s'ils font partie d'un quickpanel, etc. 2. si vos onglets sera essentiellement le même, nom de plus à l'échelle mondiale comme matériau-onglets et maintenant vous pouvez utiliser cette classe n'importe où et votre css fonctionne sans avoir à créer ce nouveau.
Maintenant, l'utilisation de cette classe comme une classe de raccordement et l'utilisation de spécificité pour atteindre le souligner, à l'instar de ce
Ne vous inquiétez pas !important. Le tabboo que l'aide !l'important est mauvais, tout est rien, mais un grand tabboo. Vous serez amende.
Ici est un SCSS échantillon
Cette solution pourrait être extrêmement utile si vous utilisez plusieurs thèmes parce que, (en supposant que vous êtes à la thématisation correctement), vous devriez avoir un thème dynamique de classe étant annexée ci-dessus dans votre code quelque part que les changements de votre INTERFACE utilisateur d'une couleur à l'autre. Donc, disons que vous avez 2 thèmes. 1 est léger, et utilise le thème de la classe
light-theme
et 2 est un thème sombre et utilise ledark-theme
classeMaintenant, vous pouvez procéder comme suit:
Sens?
Pourquoi suis-je contre les InkBarStyle solution? Parce que vous seriez en remplacement d'une couleur d'arrière-plan pour un autre, et encore pas en mesure de le changer à travers les thèmes
Bonne chance à tous!
Ici est un thème de modèle à utiliser dans vos projets:
Vous pouvez essayer ce matériel de l'INTERFACE utilisateur version la plus récente de soutien TabIndicatorProps à travers lequel vous pouvez passer de style clé.
Vous pourriez faire une rose de la div, qui est animé avec le JavaScript de JQuery. Il devrait être organisé à l'intérieur d'un vert div de la même couleur que les onglets.