如何设置MuiButton文本和活动颜色 [英] How to set MuiButton text and active color

问题描述

我正在使用以下方法创建Material-UI主题:

I'm creating a Material-UI theme with:

export const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#7ab800',
      dark: '#34b233',
    },
  })

这给了我一个默认颜色为main的按钮，活动背景为dark绿色:

which gives me a Button with a default of the main color and the active background is the dark green:

但是我希望文本为白色.如果我在primary属性中用以下方式定义contrastText:

However I want the text to be white. If I define contrastText in the primary property with:

export const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#7ab800',
      dark: '#34b233',
      contrastText: 'white',
    },
  })

处于活动状态时，活动背景现在比main ...

on being active, the active background is now lighter than the main...

推荐答案

您所指的活动"背景是由Button的TouchRipple效果引起的.您可以在 TouchRipple源代码:

The "active" background you are referring to is caused by the Button's TouchRipple effect. You can find the styling for this in the TouchRipple source code:

  /* Styles applied to the internal `Ripple` components `child` class. */
  child: {
    opacity: 1,
    display: 'block',
    width: '100%',
    height: '100%',
    borderRadius: '50%',
    backgroundColor: 'currentColor',
  }

请注意，波纹的backgroundColor是'currentColor'.因此，当文本颜色为黑色时，涟漪的背景色为黑色，而当文本颜色为白色时，涟漪的背景色为白色.这有助于确保波纹会在按钮上产生可见的效果-不会显示背景为黑色的按钮上的黑色波纹，但当前的颜色应始终与背景形成对比.

Notice that the backgroundColor of the ripple is 'currentColor'. So when the text color is black, the ripple's background color is black and when the text color is white the ripple's background color is white. This helps ensure that the ripple causes a visible effect on the button -- a black ripple on a button with a black background wouldn't show up, but the current color should always be a contrast to the background.

就像Material-UI中的几乎所有样式一样，一旦知道如何就可以自定义此样式.在下面的示例代码中，您可以看到如何在主题中使用overrides: { MuiTouchRipple: {...} }或在使用TouchRippleProps的单个按钮上使用classes道具中的child类别来覆盖它.

Like nearly all styles in Material-UI, you can of course customize this once you know how. In the sample code below you can see how to override this in the theme using overrides: { MuiTouchRipple: {...} } or on a single button using TouchRippleProps passing in the child class within the classes prop.

import React from "react";
import ReactDOM from "react-dom";
import {
  createMuiTheme,
  MuiThemeProvider,
  withStyles
} from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
const theme1 = createMuiTheme({
  palette: {
    primary: {
      main: "#7ab800",
      dark: "#34b233"
    }
  }
});
console.log(theme1);
const theme2 = createMuiTheme({
  palette: {
    primary: {
      main: "#7ab800",
      dark: "#34b233",
      contrastText: "white"
    }
  }
});
const theme3 = createMuiTheme({
  palette: {
    primary: {
      main: "#7ab800",
      dark: "#34b233",
      contrastText: "white"
    }
  },
  overrides: {
    MuiTouchRipple: {
      child: {
        backgroundColor: "rgba(0, 0, 0, 0.87)"
      }
    }
  }
});
const styles = {
  child: {
    backgroundColor: "rgba(0, 0, 0, 0.87)"
  }
};

function App({ classes }) {
  return (
    <>
      <MuiThemeProvider theme={theme1}>
        <Button variant="contained" color="primary">
          Theme 1
        </Button>
      </MuiThemeProvider>
      <br />
      <MuiThemeProvider theme={theme2}>
        <Button variant="contained" color="primary">
          Theme 2
        </Button>
        <Button variant="contained" color="primary" disableRipple>
          Theme 2 No Ripple
        </Button>
        <Button
          TouchRippleProps={{ classes: classes }}
          variant="contained"
          color="primary"
        >
          Theme 2 button-specific Ripple Override
        </Button>
      </MuiThemeProvider>
      <br />
      <MuiThemeProvider theme={theme3}>
        <Button variant="contained" color="primary">
          Theme 3 - theme-wide Ripple Override
        </Button>
      </MuiThemeProvider>
    </>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

这篇关于如何设置MuiButton文本和活动颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！