Wie ändert sich die Farbe der aktiven Registerkarte in React material-ui?

Question

Wie kann ich die Farbe der aktiven Registerkarte ändern?

Ich meine, diese pink Linie, schau dir das Bild an.

Answer 1

Nun, haben Sie zwei Möglichkeiten:

Sie das Thema anpassen könnte:
http://www.material-ui.com/#/customization/themes

Aber der einfachste Weg, um die inkBarStyle Eigenschaft verwenden würde.
Sie können es in den docs ..
Beispiel siehe:

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

Answer 2

Sie könnten ein rosa div machen, die mit JavaScript von JQuery animiert wird. Es würde in einem grünen Teil der gleichen Farbe wie die Tabs gehalten werden.

Answer 3

Obwohl dies eine ziemlich alte Frage ist, ist es immer noch einige Aufmerksamkeit bekommen und für diejenigen von uns, die Themen vielfältig und stark angepasste verwenden, diese ist eine Hektik. Ich habe eine bessere Lösung, dass man es in verschiedenen Farben anpassen kann, um nach dem Thema

Erstellen Sie zunächst eine Klasse, die Sie auf diese Weise durch Zugabe zu der Tabs Komponente

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

Halten Sie in Haken können Denken Sie daran, dass meine Tabs und Tabs unterschiedlich sein können, achten Sie also nur auf die Zeile className. Sie können es nennen, was Sie wollen. 1. Wenn Sie möchten, dass verschiedene Tabs eine andere Unterstreichung haben, nennen Sie etwas Sinnvolles wie Dashboard-Tabs, wenn die Tabs im Dashboard oder Quickpanel-Tabs sind, wenn sie Teil eines Quickpanels sind, usw. 2. wenn Ihre Tabs werden im Wesentlichen das gleiche, nenne es mehr global wie Material-Tabs und jetzt können Sie diese Klasse überall verwenden und Ihre CSS wird funktionieren, ohne dass Sie dies neu erstellen müssen. Jetzt

, benutzen Sie diese Klasse als Haken Klasse und verwenden Spezifität der unterstrichenen, wie diese

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

erreichen Sie sich nicht um die Sorgen! Wichtig. Der Tabboo, der mit! Wichtig schlecht ist, ist nichts als ein Tabu. Es wird Dir gut gehen.

ist hier ein SCSS Probe

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

Diese Lösung wäre äußerst hilfreich, wenn Sie mehrere Themen verwendet haben, weil, (vorausgesetzt, Sie richtig Thematisierung), Sie ein dynamisches Thema Klasse oben angehängt wird in haben sollte Code irgendwo, der Ihre UI von einer Farbe zur nächsten ändert. Also, sagen Sie, Sie haben 2 Themen. 1 ist leicht und verwendet die Themenklasse light-theme und 2 ist ein dunkles Thema und nutzt die dark-theme Klasse

Nun können Sie dies wie folgt:

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

macht Sinn?

Warum bin ich gegen die InkBarStyle-Lösung?Weil Sie eine Hintergrundfarbe für eine andere ersetzen würden und immer noch nicht in der Lage sind, sie über Themen zu ändern

Viel Glück jeder!

Answer 4

Hier ist eine Themenvorlage in Ihren Projekten verwenden:

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