Styling reagiert Material-UI Tabs

Question

Ich habe gerade begonnen zu reagieren reagiert material-ui und ich möchte einige Stile anpassen. Zum Beispiel Tabulatoren Hintergrundfarbe ändern.

versucht inlineStyle

wie

<Tabs style={this.getStyles().tabs} > </Tabs> 

    getStyles(){ 
     return { 

      tabs: { 
      backgroundColor: Colors.teal200 
      }, 

      headline: { 
      fontSize: '24px', 
      lineHeight: '32px', 
      paddingTop: '16px', 
      marginBottom: '12px', 
      letterSpacing: '0', 
      fontWeight: Typography.fontWeightNormal, 
      color: Typography.textDarkBlack, 

      } 
     } 
    } 

ändert Registerkarten Inhaltsbereich aber nicht den Header zu verwenden.

here wir haben einige farbenattribute wie wir es benutzen? Der Docs gibt in diesem Fall keine Beispiele.

Wie gehe ich vor?

Answer 1

So wie ich es tue, ist den <Tab> Stil außer Kraft zu setzen (wenn Sie ein kontrolliert Tabs)

render: function() { 

    var styles = { 
    default_tab:{ 
     color: Colors.grey500, 
     backgroundColor: Colors.grey50, 
     fontWeight: 400, 
    }, 
    active_tab:{ 
     color: Colors.deepOrange700, 
    } 
    } 

    styles.tab = [] 
    styles.tab[0] = styles.default_tab; 
    styles.tab[1] = styles.default_tab; 
    styles.tab[2] = styles.default_tab; 
    styles.tab[this.state.slideIndex] = objectAssign({}, styles.tab[this.state.slideIndex], styles.active_tab); 

    return (
    <Tabs> 
     <Tab style={styles.tab[0]} label="Tab 0" value="0" /> 
     <Tab style={styles.tab[1]} label="Tab 1" value="1" /> 
     <Tab style={styles.tab[2]} label="Tab 2" value="2" /> 
    </Tabs> 
) 

Obwohl ich glaube, der bessere Weg, mehr Requisiten für Tabs/Tab haben, damit wir es anpassen.

Answer 2

Also, wenn jemand das gleiche hier gegenüberstellen würde, was ich

gefunden

mit Thememanager wir können Ausgänge Stil

ändern

zum Beispiel

ThemeManager.setTheme(ThemeManager.types.DARK); 

wechselnden spezifischen Stil Variablen mit setPalette

componentWillMount() { 
     ThemeManager.setPalette({ 
      accent1Color: Colors.indigo50, 
      primary1Color: "#474B4E", 
      primary2Color: "#2173B3", 
      primary3Color: "#A9D2EB", 
      accent1Color: "#ED3B3B", 
      accent2Color: "#ED2B2B", 
      accent3Color: "#F58C8C" 
     }); 
    } 

Answer 3

Die einfachste Möglichkeit zum Anpassen der Komponente besteht darin, einfach altes CSS mithilfe des Attributs className anzuwenden, da die Funktionen der bereitgestellten style-Attribute ziemlich begrenzt sind.

Lassen Sie uns ein straight forward Beispiel betrachten: (! Nicht CSS)

const MyAwesomeTabContainer =() => (
    <Tabs className="tabs-container"> 
     <Tab icon={<Person />} className="tab" /> 
     <Tab icon={<Content />} className="tab" /> 
    </Tabs> 
); 

Die folgende WENIGER Code Ihnen erlauben würde, den Stil nach Ihren Bedürfnissen anpassen: es

.tabs-container { 
    >div:first-child { // modifies the background color 
    background-color: #f6f6f6 !important; 
    } 

    >div:last-child { // changes the distance between tabs and content 
    margin-top: 10px; 
    } 

    .tab { 
    >div>div { // modifies the font size of the tab labels 
     font-size: 10px; 

     svg { // modifies the color of SVG icons 
     fill: #626262 !important; 
     } 
    } 
    } 
} 

Leider ist erforderlich, um ein paar !important Anweisungen anzuwenden, da die Stilinformationen der Komponente in Code inline festgelegt sind.

Answer 4

wollte ich eine Klasse auf der aktiven Registerkarte, so dass hier eine schnelle Lösung für das heißt:

<Tabs className="pcd-tabs" onChange={this.handleChange}> 
    <Tab className="pcd-tab pcd-tab0 pcd-tab-active" label="Chart" value={0} /> 
    <Tab className="pcd-tab pcd-tab1" label="Series" value={1} /> 
</Tabs> 

als

handleChange = (value) => { 
    document.getElementsByClassName('pcd-tab-active')[0].classList.remove('pcd-tab-active'); 
    document.getElementsByClassName('pcd-tab' + value)[0].classList.add('pcd-tab-active'); 
};