reactjs - 覆盖材质 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>

有人能帮忙吗。

谢谢

标签： reactjsmaterial-ui

Answer 1

我在您问题中的代码中看到的唯一问题是您有“文本转换”而不是“文本转换”。

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

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