覆盖材料UI按钮文本 [英] Override Material UI Button Text

问题描述

材质UI按钮将按钮内的文本默认为大写。我希望用按钮覆盖文本，使其与我键入的按钮相同，并且不是大写。

我已尝试使用textTransform-None覆盖样式

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

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

有没有人能帮上忙？

谢谢

推荐答案

我在您的问题中看到的唯一代码问题是，您使用的是转换(&Q；；T)，而不是rTransform(&Q) 按钮的这一方面由主题(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);

---

这里有一个类似的示例，但是对于v5的Material-UI：

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

这篇关于覆盖材料UI按钮文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！