Styling отвечает на материал-ui tabs

Question

Я только начал использовать реакцию material-ui, и я хотел бы настроить некоторые стили. Например, изменение цвета фона вкладки.

пытается использовать inlineStyle

как

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

      } 
     } 
    } 

изменяет язычки область содержимого, но не заголовка.

here У нас есть некоторые цветовые атрибуты, как мы его используем? В этом случае в Документах нет примеров.

Как это сделать?

Answer 1

Как я сделать это, чтобы переопределить <Tab> стиль (если у вас есть управляемый 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> 
) 

Хотя я думаю, что лучший способ, чтобы иметь больше реквизита для вкладок/Tab, чтобы мы могли настроить его.

Answer 2

Так что, если кто-нибудь столкнется с такой же вот что я нашел

с ThemeManager мы можем изменить выходы стиль

, например

ThemeManager.setTheme(ThemeManager.types.DARK); 

изменения конкретных переменных стиля с setPalette

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

Answer 3

Самый удобный способ настройки компонента - просто применить простой старый CSS с использованием атрибута className, поскольку возможности предоставленных атрибутов style довольно ограничены.

Рассмотрим прямой вперед пример: (! Не CSS)

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

Следующая МЕНЬШЕ код позволит вам настроить стиль в соответствии с вашими потребностями:

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

К сожалению, это необходимо применить несколько операторов !important, потому что информация о стиле компонента устанавливается встроенным в код.

Answer 4

Я хотел класс на активной вкладке, так что здесь является быстрым решением для этого:

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

чем

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