reactjs 材质UI -更改主题中的按钮文本颜色

ny6fqffe  于 2023-05-22  发布在  React
关注(0)|答案(6)|浏览(155)

我在Material UI主题中直接更改按钮文本颜色时遇到问题。更改主颜色+按钮字体大小工作正常,所以问题不在于传递主题。下面是我的代码:

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import { lightBlue } from 'material-ui/colors';
import styled from 'styled-components';

const theme = createMuiTheme({
  palette: {
    primary: lightBlue, // works
  },
  raisedButton: {
    color: '#ffffff', // doesn't work
  },
  typography: {
    button: {
      fontSize: 20, // works
      color: '#ffffff' // doesn't work
    }
  }
});

const App = ({ user, pathname, onToggleDrawer }) => (
  <MuiThemeProvider theme={theme}>
    ...
  </MuiThemeProvider>
);

我还尝试使用导入的颜色而不是#ffffff,但这也没有效果。
有人有什么主意吗?

2w3rbyxf

2w3rbyxf1#

这对我很有效。我们选择的颜色决定有一个黑暗的按钮对比色,但白色作为对比色看起来更好:

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#46AD8D",
      contrastText: "#fff" //button text white instead of black
    },
    background: {
      default: "#394764"
    }
  }
});
fcwjkofz

fcwjkofz2#

解决了!这个终于成功了:

const theme = createMuiTheme({
  palette: {
    primary: lightBlue,
  },
  overrides: {
    MuiButton: {
      raisedPrimary: {
        color: 'white',
      },
    },
  }
});

因此,您只需要使用“覆盖”并明确您想要更改的组件的确切类型。

e0uiprwp

e0uiprwp3#

当您在Button中设置颜色时(例如<Button color='primary'),文本颜色的应用方式取决于Button的变体:

  • text| outlined:使用主颜色(例如primary.main)作为文本颜色。
  • contained:使用contrastText颜色作为文本颜色,main颜色作为背景颜色。
import { blue, yellow } from '@mui/material/colors';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: blue[500],
      contrastText: yellow[500],
    },
  },
});

现场演示

相关回答

jdzmm42g

jdzmm42g4#

这个解决办法对我很有效

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      label: {
        color: "#f1f1f1",
      },
    },
  },
zbq4xfa0

zbq4xfa05#

这对我来说很有用,例如。对于自定义successerror颜色:

// themes.ts
import { createTheme, responsiveFontSizes } from '@mui/material/styles';

// Create a theme instance.
let theme = createTheme({
  palette: {
    primary: {
      main: '#F5F5F5',         // Used elsewhere
    },
    success: {
      main: '#11C6A9',         // custom button color (seafoam green)
      contrastText: '#ffffff', // custom button text (white)
    },
    error: {
      main: '#C6112E',         // custom button color (red)
    },
  },
});

theme = responsiveFontSizes(theme);

export default theme;

然后在.jsx/.tsx中声明Button color
成功按钮:

<Button
  variant="contained"
  color="success"
>
  Success button text
</Button>

对于红色按钮w/ outline:

<Button
  variant="outlined"
  color="error">
  Danger button text
</Button>
4jb9z9bj

4jb9z9bj6#

从https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js#L200你可以看到可以在主题中为各种组件设置什么,在raisedButton上你会看到color是实际的按钮背景,要设置文本颜色,你需要更改textColor属性。

const theme = getMuiTheme({
  raisedButton: {
    textColor: '#ffffff', // this should work
    primaryTextColor: '#ffffff' // or this if using `primary` style
  }
});

这并不完全直观,因为CSS color影响文本而不是背景,它甚至不匹配组件本身的属性http://www.material-ui.com/#/components/raised-button,而组件本身有backgroundColorlabelColor的 prop !!!

相关问题