樣式反應材料-ui選項卡

Question

我剛開始使用 reacts 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,

          }
        }
    }

更改選項卡內容區域但不更改標題。

這里我們有一些顏色屬性我們如何使用呢？ 在這種情況下，文檔沒有給出示例。

我該如何進行？

Answer 1

我這樣做的方式是覆蓋<Tab>樣式（如果您有受控的選項卡）

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

雖然我認為更好的方法是為 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

自定義組件最方便的方法是使用className屬性簡單地應用普通的舊 CSS，因為提供的style屬性的功能相當有限。

讓我們考慮一個簡單的例子：

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

以下LESS代碼（不是 CSS！）將允許您根據需要自定義樣式：

.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

對於 MUI（Material-UI V5），我想為選項卡添加框陰影，使其看起來像這樣

您可以使用“組件”屬性來傳遞 elementType。 用於根節點的組件。 使用 HTML 元素或組件的字符串。 我使用了“盒子”組件：

import { Box } from '@mui/material';

...

<Tabs
  value={selectedTab}
  component={Box}
  boxShadow={3}
  onChange={changeSelectedTab}
  variant="fullWidth"
>

所以現在我可以使用所有的 Box 組件屬性，比如“boxShadow”。 我認為使用其他 MUI 組件的屬性進行樣式設置更加簡潔。僅在“內聯警告”時要小心https://mui.com/material-ui/guides/composition/#component-prop

https://mui.com/material-ui/api/tabs/#props

Answer 5

我想要一個在活動選項卡上的課程，所以這里有一個快速的解決方案：

<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');
};