Lo stile reagisce con le linguette dell'interfaccia utente

Question

Ho appena iniziato a utilizzare reagisce material-ui e desidero personalizzare alcuni stili. Ad esempio, cambiare il colore di sfondo delle schede.

cercando di utilizzare inlineStyle

come

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

      } 
     } 
    } 

cambia schede dell'area di contenuto, ma non l'intestazione.

here abbiamo alcuni attributi di colore come lo usiamo? Il documento non fornisce esempi in questo caso.

Come procedere?

Answer 1

Il modo in cui lo faccio è quello di ignorare lo stile <Tab> (se si dispone di un Tabs controllato)

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

anche se penso che il modo migliore è quello di avere più oggetti di scena per le schede/linguetta in modo che possiamo personalizzare esso.

Answer 2

Quindi, se qualcuno si troverebbe ad affrontare lo stesso qui è quello che ho trovato

con ThemeManager possiamo cambiare le uscite di stile

ad esempio

ThemeManager.setTheme(ThemeManager.types.DARK); 

cambiare le variabili stile specifico con setPalette

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

Answer 3

Il modo più conveniente per personalizzare il componente consiste semplicemente nell'applicare il vecchio CSS semplice utilizzando l'attributo className, poiché le funzionalità degli attributi style forniti sono piuttosto limitate.

Consideriamo un dritto esempio in avanti: (! Non CSS)

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

Il seguente MENO codice permetterebbe di personalizzare lo stile in base alle proprie esigenze:

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

Purtroppo è necessario applicare alcune istruzioni !important perché le informazioni di stile del componente sono impostate in linea nel codice.

Answer 4

Volevo una classe sulla scheda attiva, ecco una soluzione rapida per questo:

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

di

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