web-dev-qa-db-fra.com

Comment changer la couleur de l'onglet actif dans React material-ui?

Comment puis-je changer la couleur de l'onglet actif?

Je veux dire, cette ligne pink, regardez la photo.

 enter image description here

material-ui
11
none

Eh bien, vous avez deux options:

Vous pouvez personnaliser le thème:
http://www.material-ui.com/#/customization/themes

Mais le moyen le plus simple serait d'utiliser la propriété inkBarStyle.
Vous pouvez le voir dans la docs ..
Exemple:

<Tabs inkBarStyle={{background: 'blue'}}>...
12
André Junges

La solution de @ Risa fonctionne très bien et devrait être la réponse acceptée. Mon exemple d’explication ressemble à ceci:

<Tabs
  fullWidth
  centered
  classes={{
    indicator: classes.indicator
  }}>
    <Tab />
    <Tab />
</Tabs>

et les styles: 

const styles = theme => ({
  indicator: {
    backgroundColor: 'white',
  },
})
4
dauffret

Bien qu’il s’agisse d’une question assez ancienne, elle suscite toujours l’attention et, pour ceux d’entre nous qui utilisons des thèmes multiples et fortement personnalisés, c’est un problème. J'ai une meilleure solution qui vous permettra de le personnaliser dans différentes couleurs en fonction du thème.

Commencez par créer une classe à laquelle vous pouvez accrocher en l'ajoutant au composant Onglets de cette façon.

<Tabs
   onChange={this.handleChange}
   value={this.state.slideIndex}
   className="dashboard-tabs"> //this is what you need
       <Tab label="Main" value={0}/>
       <Tab label="Analytics" value={1}/>
       <Tab label="Live Widgets" value={2}/>
</Tabs>

N'oubliez pas que mes onglets et vos onglets peuvent être différents, alors ne prêtez attention qu'à la ligne className. Vous pouvez le nommer comme vous voulez. 1. Si vous souhaitez avoir différents onglets avec un soulignement différent, nommez-le de manière significative, par exemple, dashboard-tabs si les onglets se trouvent dans le tableau de bord ou dans le panneau de navigation rapide s'ils font partie d'un panneau de visualisation rapide, etc. 2. si vos onglets seront essentiellement le même, nommez-le plus globalement comme material-tabs et maintenant vous pouvez utiliser cette classe n’importe où et votre CSS fonctionnera sans avoir à le créer à nouveau.

Maintenant, utilisez cette classe comme classe de hook et utilisez la spécificité pour atteindre le soulignement, comme ceci

.dashboard-tabs > div{
    background-color: #333 !important;
}
.dashboard-tabs > div:nth-child(2) > div{
    background-color: #ddd !important;
}

Ne vous inquiétez pas pour le! Important. Le tabbo selon lequel utiliser! Important est mauvais est tout sauf un gros tabbo. Ça ira.

Voici un exemple SCSS

.dashboard-tabs{
    > div{
        background-color: $bg-color-meddark !important;
        &:nth-child(2){
            > div{
                background-color: $brand-info !important;
            }
        }
    }
}

Cette solution serait extrêmement utile si vous utilisiez plusieurs thèmes, car (en supposant que vous thématisiez correctement), vous devriez ajouter une classe de thème dynamique ci-dessus dans votre code, quelque part qui modifierait votre interface utilisateur d'une couleur à l'autre. Alors, disons que vous avez 2 thèmes. 1 est clair et utilise la classe de thème light-theme et 2 est un thème sombre et utilise la classe dark-theme.

Maintenant, vous pouvez le faire comme suit:

.light-theme .dashboard-tabs > div{
    background-color: #fff !important;
}
.light-theme .dashboard-tabs > div:nth-child(2) > div{
    background-color: #333 !important;
}
.dark-theme .dashboard-tabs > div{
    background-color: #333 !important;
}
.dark-theme .dashboard-tabs > div:nth-child(2) > div{
    background-color: #ddd !important;
}

Logique?

Pourquoi suis-je contre la solution InkBarStyle? Parce que vous seriez en train de remplacer une couleur de fond par une autre et que vous ne pourrez toujours pas la changer d'un thème à l'autre

Bonne chance à tous!

1
LOTUSMS

Pour Material-ui version 1.0.0-beta.36, les éléments suivants ont fonctionné pour moi:

<Tabs indicatorColor={'HEX_COLOR'}>

inkBarStyle doit être obsolète/remplacé par indicatorColor dans v1.0

EDIT: Lien vers les documents v1.0: https://material-ui-next.com/api/tabs/

EDIT: Après la version stable de la v1.0, il semble que la solution précédente ne fonctionne plus. 

Voici les solutions restantes:

  1. Utilisez un remplacement de classes pour la classe indicator. Lien vers la documentation sur les remplacements.Lien vers le composant Onglet docs avec les classes de l'API CSS en bas.
  2. Configurez votre palette de thèmes pour utiliser la couleur souhaitée via les intentions de couleur primary ou secondary. Vous pouvez ensuite spécifier votre couleur primary ou secondary souhaitée à utiliser avec l'attribut indicatorColor mentionné ci-dessus. Lien vers Docs.

Les substitutions de classes peuvent être l'option la plus simple. Vous devez utiliser le composant withStyles pour injecter vos classes de style personnalisées. La raison en est que le style de la bibliothèque remplacera vos classes ou vos composants de style. Les documents liés ci-dessus fournissent un excellent exemple.

0
Risa

Voici un modèle de thème à utiliser dans vos projets:

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

let _colors = require('material-ui/styles/colors');
let _colorManipulator = require('material-ui/utils/colorManipulator');
let _spacing = require('material-ui/styles/spacing');
let _spacing2 = _interopRequireDefault(_spacing);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {default: obj};
}

exports.default = {
  spacing: _spacing2.default,
  fontFamily: 'Roboto, sans-serif',
  borderRadius: 2,
  palette: {
    primary1Color: _colors.grey50,
    primary2Color: _colors.cyan700,
    primary3Color: _colors.grey600,
    accent1Color: _colors.lightBlue500,
    accent2Color: _colors.pinkA400,
    accent3Color: _colors.pinkA100,
    textColor: _colors.fullWhite,
    secondaryTextColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.7),
    alternateTextColor: '#303030',
    canvasColor: '#303030',
    borderColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.3),
    disabledColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.3),
    pickerHeaderColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.12),
    clockCircleColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.12)
  }
};
0
Shlomi Schwartz