प्रतिक्रिया सामग्री-ui में सक्रिय टैब रंग कैसे बदलें?

Question

मैं सक्रिय टैब का रंग कैसे बदल सकता हूं?

मेरा मतलब है, यह pink लाइन, तस्वीर देखें।

Answer 1

ठीक है, आप दो विकल्प हैं।
आप docs में देख सकते हैं ..
उदाहरण:

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

Answer 2

आप एक गुलाबी div कि JQuery के जावास्क्रिप्ट के साथ एनिमेटेड है बना सकता है। यह एक हरे रंग के div के अंदर टैब के समान रंग के अंदर आयोजित किया जाएगा।

आप विषय को अनुकूलित कर सकते हैं::
http://www.material-ui.com/#/customization/themes

लेकिन सबसे आसान तरीका है inkBarStyle संपत्ति का उपयोग करेंगे

Answer 3

हालांकि यह एक काफी पुराने सवाल है, यह अभी भी कुछ ध्यान हो रही है और हम में से जो लोग कई और भारी अनुकूलित विषयों का उपयोग कर रहे हैं के लिए यह, एक परेशानी है मैं एक बेहतर समाधान है कि आप विषय

पहले, टैब्स घटक को यह इस तरह से जोड़कर एक वर्ग आप को हुक कर सकते हैं बनाने के

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

रखें के अनुसार अलग अलग रंग में इसे अनुकूलित करने की अनुमति देगा है दिमाग, मेरे टैब और आपके टैब अलग हो सकते हैं इसलिए केवल कक्षा नाम रेखा पर ध्यान दें। आप इसे जो कुछ भी चाहते हैं उसका नाम दे सकते हैं। 1. यदि आप अलग-अलग टैब के साथ अलग-अलग टैब रखना चाहते हैं, तो इसे डैशबोर्ड-टैब की तरह सार्थक नाम दें यदि टैब डैशबोर्ड या क्विकपैन-टैब में हैं, यदि वे क्विकपैनल का हिस्सा हैं, आदि 2. यदि आपके टैब होंगे अनिवार्य रूप से वही, इसे भौतिक-टैब की तरह अधिक वैश्विक रूप से नाम दें और अब आप उस वर्ग का कहीं भी उपयोग कर सकते हैं और आपका सीएसएस इसे फिर से बनाने के बिना काम करेगा।

अब, एक हुक वर्ग के रूप में इस वर्ग का उपयोग करें और विशिष्टता का उपयोग रेखांकन तक पहुंच पाएंगे,

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

तरह के बारे में चिंता मत करो! महत्वपूर्ण। टैबबो जो उपयोग कर रहा है! महत्वपूर्ण बुरा है, सब कुछ एक बड़ा टैबबो नहीं है। ठीक हो जायेंगे।

यहाँ एक एससीएसएस नमूना

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

यह समाधान अत्यंत उपयोगी हो सकता है अगर आप एक से अधिक विषयों का उपयोग कर रहे थे क्योंकि, (यह मानते हुए आप सही तरीके से प्रसंगयुक्तप्रस्तुतिकरण कर रहे हैं), तो आपको एक गतिशील विषय कक्षा में ऊपर संलग्न किया जा रहा होना चाहिए अपने कोड कहीं कहीं जो आपके यूआई को एक रंग से अगले रंग में बदल देता है। तो, कहें कि आपके पास 2 थीम हैं। 1 प्रकाश है और विषय वर्ग light-theme उपयोग करता है और 2 एक अंधेरे विषय है और dark-theme वर्ग

का उपयोग करता है अब इस प्रकार है, तो आप ऐसा कर सकते हैं:

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

भावना बनाता है?

मैं इंकबार स्टाइल समाधान के खिलाफ क्यों हूं?क्योंकि आप एक पृष्ठभूमि रंग को दूसरे के लिए बदल रहे हैं और फिर भी इसे विषयों में बदलने में सक्षम नहीं हैं

सभी को शुभकामनाएँ!

Answer 4

यहाँ अपनी परियोजनाओं में उपयोग करने के लिए एक विषय टेम्पलेट है:

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