Styling reagiert, material-ui tabs

Ich gerade begonnen, reagiert material-ui und ich würde gerne passen einige Stile. Zum Beispiel ändern Registerkarten Hintergrundfarbe.

versuchen, zu verwenden 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,

          }
        }
    }

änderungen tabs content-Bereich, aber nicht die header.

hier wir haben einige Farbe Attribute wie verwenden wir es? Die Docs gibt keine Beispiele in diesem Fall.

Wie muss ich Vorgehen?

  • Fügen Sie einige CSS überschreiben die aktuellen styles?
  • einfach verwenden Sie die vorgesehenen Farbcodes material-ui.com/#/customization/colors zum ändern der Hintergrundfarbe der tab. Aber wie?
InformationsquelleAutor fefe | 2015-08-05
  1. 8

    Die Art, wie ich es ist das überschreiben der <Tab> Stil (wenn Sie eine kontrollierte 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 denke, der bessere Weg ist, um weitere Requisiten für Tabs/Tab, so können wir es anpassen.

    • Schön! Einfach zu aktualisieren: objectAssign - jetzt Objekt.zuweisen
    InformationsquelleAutor yuchien
  2. 4

    Also wenn jemand würde das gleiche hier ist was ich gefunden

    mit ThemeManager wir können den Stil ändern, Ausgänge

    beispielsweise

    ThemeManager.setTheme(ThemeManager.types.DARK);

    ändern bestimmter Stil-Variablen mit setPalette

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

    Der bequemste Weg, um anpassen der Komponente ist einfach anzuwenden plain old CSS die className - Attribut, da die Kapazitäten der zur Verfügung gestellten style Attribute sind ziemlich begrenzt.

    Betrachten wir eine geradlinig-Beispiel:

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

    Den folgenden WENIGER code (nicht CSS!) würde Ihnen erlauben, passen Sie den Stil nach Ihren Bedürfnissen:

    .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 es notwendig, ein paar !important Aussagen, weil die style-Informationen der Komponente festgelegt ist inline im code.

    InformationsquelleAutor Dennis
  4. -1

    Wollte ich eine Klasse auf die aktive Registerkarte, so ist hier eine schnelle Lösung für dieses:

    <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');
};
    InformationsquelleAutor kakaja
Schreibe einen Kommentar