Question

在React中，我无法超越Material UI的标签样式。我使用了想要覆盖其指示器颜色，文本颜色的组件，但是失败了。

我已经尝试添加新的className来覆盖值，但是失败了。如果我将指示器颜色和文本颜色切换为无，则只能切换回默认设置。

    <Tabs value={TabValue} className={classes.tabs}
      indicatorColor="primary"
      textColor="primary"
      onChange={this.handleChange}
    >

我希望.tabs会改变我的指标和文本颜色的值，但是什么也没发生

希望有人可以启发我！

Answer 1

根据Tabs docs： indicatorColor可以是“ 主要”，“ 次要”之一。默认为' secondary '
textColor可以是以下之一：'主要'，'次要'，'继承'。默认值为'继承
在以下示例中，我更改（而不是覆盖）默认的textColor和indicatorColor：

CREATE OR REPLACE FUNCTION insertOrUpdateDataByTable() 

RETURNS text AS $$ 

DECLARE 

    tableName text; shg nrlmshare.shg_detail_share%rowtype; total integer; ab 
text;

BEGIN 

   tablename := (select concat(lower(state_short_name), '_shg_detail') from mst_state where state_code = 2);

   raise notice 'Value: %', tableName;

   for shg in select * from nrlmshare.shg_detail_share  order by id desc limit 5    

loop 

EXECUTE format('select count(shg_code) from %I where shg_code='||shg.shg_code,tablename) into total;

raise notice 'total: %', total;

end loop; 
END; 
$$  LANGUAGE plpgsql;

如果要替代原色和副色，请使用MuiTheme：

  <AppBar position="static">
    <Tabs value={value} onChange={handleChange}
     indicatorColor="primary" //default is secondary
     textColor="secondary"  //default is inherit
    >
      <Tab label="Item One" />
      <Tab label="Item Two"  />
      <Tab label="Item Three" />
    </Tabs>
  </AppBar>

而不是用ThemeProvider包装组件：

import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import {green, blue} from '@material-ui/core/colors';

const theme = createMuiTheme({ 
  palette: { // i override the default palette
    primary: green,
    secondary: blue
  }
});

您可以参考此CodeSandbox工作示例：https://codesandbox.io/s/material-demo-49mym?fontsize=14

Material-UI标签的替代样式

1 个答案: