Style réagit matériel-ui tabs

J'ai juste commencé à utiliser réagit matériel-ui et je voudrais personnaliser certains styles. Par exemple, l'évolution des onglets de couleur d'arrière-plan.

en essayant d'utiliser inlineStyle

comme 

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

          }
        }
    }

changements onglets de la zone de contenu, mais pas la tête.

ici nous avons certains des attributs de couleur comment nous les utilisons? Les Docs ne donne pas d'exemples dans ce cas.

Comment dois-je procéder?

Ajouter un peu de CSS pour remplacer les styles en cours?
simple d'utiliser des codes de couleur material-ui.com/#/customization/colors pour changer la couleur de fond de l'onglet. Mais comment?

OriginalL'auteur fefe | 2015-08-05

  1. 8

    La façon dont je le fais, c'est de remplacer la <Tab> style (si vous avez contrôlé les Onglets)

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

    Mais je pense que la meilleure façon est d'avoir plus d'accessoires pour les Onglets/Onglet afin que nous puissions personnaliser.

    Nice! Juste mise à jour: objectAssign Objet.attribuer

    OriginalL'auteur yuchien

  2. 4

    Donc, si quelqu'un aurait à affronter le même ici que j'ai trouvé

    avec ThemeManager on peut changer le style de sorties

    par exemple

    ThemeManager.setTheme(ThemeManager.types.DARK);

    changement de style spécifique de variables avec setPalette

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

    OriginalL'auteur fefe

  3. 2

    Le moyen le plus pratique pour personnaliser le composant est de simplement appliquer la plaine de vieux CSS à l'aide de la className attribut, puisque les capacités de la condition style attributs sont assez limitées.

    Prenons un simple exemple:

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

    Suivantes MOINS code (pas de CSS!) vous permettra de personnaliser le style en fonction de vos besoins:

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

    Malheureusement, il est nécessaire d'appliquer un peu de !important consolidés, puisque les informations de style de l'élément est mis en ligne dans le code.

    OriginalL'auteur Dennis