Come cambia il colore della scheda attivo in React material-ui?

Question

Come posso cambiare il colore della scheda attiva?

Voglio dire, questa linea pink, guarda la foto.

Answer 1

Beh, avete due opzioni:

Si potrebbe personalizzare il tema:
http://www.material-ui.com/#/customization/themes

Ma il modo più semplice sarebbe utilizzando la proprietà inkBarStyle.
Lo si può vedere nel docs ..
Esempio:

<Tabs inkBarStyle={{background: 'blue'}}>... 

Answer 2

Si potrebbe fare un div rosa che si è animato con JavaScript di jQuery. Si sarebbe tenuto all'interno di un div verde dello stesso colore delle schede.

Answer 3

Anche se questa è una domanda piuttosto vecchio, ma ancora ricevendo una certa attenzione e per quelli di noi che sono l'utilizzo di più e fortemente personalizzati temi, questo è una seccatura. Ho una soluzione migliore che vi permetterà di personalizzare in diversi colori a seconda del tema

In primo luogo, creare una classe si può collegare ad aggiungendolo alla componente Tabs questo modo

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

Tenete a la mia mente, le mie schede e le tue schede potrebbero essere diverse quindi presta attenzione solo alla riga className. Puoi chiamarlo come vuoi. 1. Se desideri avere schede diverse con una sottolineatura diversa, assegnale un nome significativo come le schede del pannello di controllo se le schede sono nella dashboard o nelle schede di pannello rapido se fanno parte di un pannello rapido, ecc. 2. Se le tue schede saranno essenzialmente lo stesso, chiamalo più globalmente come materiale-tab e ora puoi usare quella classe ovunque e il tuo css funzionerà senza doverlo creare di nuovo.

Ora, utilizzare questa classe come classe gancio e utilizzare la specificità per raggiungere la sottolineatura, come questo

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

Non preoccuparti per l'! Importante. Il tabboo che l'uso di! Important è cattivo, non è altro che un grande tabboo. Starai bene.

Ecco un esempio SCSS

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

Questa soluzione sarebbe estremamente utile se si stesse utilizzando più temi perché, (supponendo che si sta tematizzazione correttamente), si dovrebbe avere una classe tema dinamico di essere aggiunto sopra nella tua codice da qualche parte che cambia l'interfaccia utente da un colore all'altro. Quindi, dì che hai 2 temi. 1 è la luce e utilizza la classe tema light-theme e 2 è un tema scuro e utilizza la classe dark-theme

Ora, si può fare questo come segue:

.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; 
} 

ha un senso?

Perché sono contro la soluzione InkBarStyle?Perché dovresti sostituire un colore di sfondo con un altro e non riuscire a cambiarlo tra i temi

Buona fortuna a tutti!

Answer 4

Ecco un modello di tema da utilizzare nei vostri progetti:

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