reactjs React中的访问按钮原色

wyyhbhjk 于 2023-06-05 发布在 React

关注(0)|答案(1)|浏览(181)

我试图提供覆盖的主题中包含的按钮，主要和悬停。我试过了，但是不管用

CODESANDBOX链接CLICK HERE
theme/overrides/MuiButton.js

import palette from '../palette';

export default {
  contained: {
    backgroundColor: '#FFFFFF',
    '&.primary': {
      '&:hover': {
        backgroundColor: palette.primary.dark,
      },
    },
  },
};

theme/overrides/index.js

import MuiButton from "./MuiButton";

export default {
  MuiButton
};

theme/index.js

import { createMuiTheme } from "@material-ui/core";

import palette from "./palette";
import typography from "./typography";
import overrides from "./overrides";

const theme = createMuiTheme({
  palette,
  typography,
  overrides,
  zIndex: {
    appBar: 1200,
    drawer: 1100
  }
});

export default theme;

reactjs

来源：https://stackoverflow.com/questions/62830756/access-button-primary-color-in-react

1条答案

按热度按时间

wkyowqbh1#

确定如何适当地覆盖主题中的默认样式的最佳资源是查看默认样式是如何定义的。
来自https://github.com/mui-org/material-ui/blob/v4.11.0/packages/material-ui/src/Button/Button.js#L138:

containedPrimary: {
    color: theme.palette.primary.contrastText,
    backgroundColor: theme.palette.primary.main,
    '&:hover': {
      backgroundColor: theme.palette.primary.dark,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.primary.main,
      },
    },
  },

将此方法转换为问题中的代码如下所示：

import palette from '../palette';

export default {
  containedPrimary: {
    backgroundColor: '#FFFFFF',
    '&:hover': {
      backgroundColor: palette.primary.dark,
    },
  },
};

赞(0）回复(0）举报 2023-06-05

我来回答

reactjs React中的访问按钮原色

1条答案

相关问题

热门标签

最新问答