覆盖材质UI按钮文本

Question

“材料UI”按钮会将按钮内的文本默认为大写。我想使用按钮覆盖文本，使其与输入的文本相同，而不是大写。

我尝试通过使用texttransform覆盖样式-无

viewButton: 
{ 
backgroundColor: "#00D2BC",
radius: "3px",
color: "#FFFFFF",
texttransform: "none"
}

<Button
 className={classes.viewButton}
 data-document={n.id}
 onClick={this.handleView}
>
   View Document
</Button>

任何人都可以帮忙吗

谢谢

Answer 1

对于那些不想去做的人，在每个组件中到处都可以尝试使用全局ovverrides，

const myTheme = createMuiTheme({
    overrides: {
        MuiButton: {
            root: {
                textTransform: 'none'
            }
        }
    },
});

您像这样制作一个主题对象，并将其提供给主题提供程序，该提供程序应将您的应用程序组件包装在index.js文件中

<ThemeProvider theme={myTheme}>
    <PersistGate loading={null} persistor={persistor}>
        <App />
    </PersistGate>
</ThemeProvider>

进口：

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

Answer 2

对于docs，您应该使用label类来覆盖text-transform属性：

使用此样式：

viewButtonLabel: { textTransform: "none" }

使用此按钮：

<Button
  className={classes.viewButton}
  data-document={n.id}
  onClick={this.handleView}
  classes={{ label: classes.viewButtonLabel }}
  >

Answer 3

我对问题代码的唯一疑问是您拥有的是“ text t ransform”，而不是“ text T ransform”。

按钮的这一方面由主题（here，here和here）控制，因此也可以通过主题进行更改。我在下面的代码中演示了这两种方法。

import React from "react";
import ReactDOM from "react-dom";
import {
  makeStyles,
  createMuiTheme,
  MuiThemeProvider
} from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  button: {
    textTransform: "none"
  }
});
const defaultTheme = createMuiTheme();
const theme = createMuiTheme({
  typography: {
    button: {
      textTransform: "none"
    }
  }
});

function App() {
  const classes = useStyles();
  return (
    <MuiThemeProvider theme={defaultTheme}>
      <Button>Default Behavior</Button>
      <Button className={classes.button}>Retain Case Via makeStyles</Button>
      <MuiThemeProvider theme={theme}>
        <Button>Retain Case Via theme change</Button>
      </MuiThemeProvider>
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 4

我在没有样式的情况下使用了Typography！

<Button>
  <Typography style={{ textTransform: 'none' }}>Test Button</Typography>
</Button>

Answer 5

@Shamseer Ahammed的回答提供了最终为我解决此问题的线索。

在自定义主题中使用“ overrides”属性最终为我解决了问题。我已经花了几天时间尝试使用MuiTab代替Button来做到这一点。我认为这是启发式的方法：

1. 在主题中使用“替代”以指定我要自定义组件
2. 使用组件名称（MuiButton或MuiTab）来指定要自定义的组件
3. 提供一对key:value用于自定义（textTransform: 'none'）。

我真的希望material-ui文档能够使这种用法模式更加清晰。我希望在简单的HelloWorld示例和Component API精髓之间找到一个中间立场。

至少出于我和我的目的，Shamseer Ahammed的答案以无法接受的答案为我的解决方案打开了大门。