覆盖材质 UI 按钮文本

Question

Material 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

我在你的问题的代码中看到的唯一的问题是，你有“文本牛逼ransform”，而不是“文本牛逼ransform”。

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

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);

这是一个类似的示例，但适用于 Material-UI 的 v5：

import React from "react";
import ReactDOM from "react-dom";
import { styled, createTheme, ThemeProvider } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const StyledButton = styled(Button)(`
  text-transform: none;
`);
const defaultTheme = createTheme();
const theme1 = createTheme({
  typography: {
    button: {
      textTransform: "none"
    }
  }
});
const theme2 = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: "none"
        }
      }
    }
  }
});

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Button>Default Behavior</Button>
      <StyledButton>Retain Case Via styled</StyledButton>
      <ThemeProvider theme={theme1}>
        <Button>Retain Case Via theme change</Button>
      </ThemeProvider>
      <ThemeProvider theme={theme2}>
        <Button>Retain Case Via alternate theme change</Button>
      </ThemeProvider>
    </ThemeProvider>
  );
}

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

Answer 2

这似乎适用于 V5

<Button sx={{ textTransform: 'none' }}>
Label
</Button>

https://mui.com/system/the-sx-prop/

Answer 3

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

使用这种风格：

viewButtonLabel: { textTransform: "none" }

使用此按钮：

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

Answer 4

对于那些不想在每个组件内到处执行此操作的人，请尝试全局覆盖，

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';