纸张按钮始终为大写

Question

我正在使用Paper-Button,但我面临的问题是按钮文本总是变为大写或正常情况.我没有看到任何CSS或Javascript属性被应用于大写.我该如何解决这个问题.

Answer 1

我有同样的问题，我通过调整默认主题解决了这个问题。将以下代码添加到文件（您选择的名称）.js

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

const theme = createMuiTheme({      
  typography: {
    button: {
      textTransform: 'none'
    }
  }
});

export default theme;

然后，您可以在 index.js 中将该文件添加到您的应用程序中。我将它命名为 theme.js：

...
import theme from './theme';    
...
const app = () => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <App />
  </ThemeProvider>
);

ReactDOM.render(app, document.getElementById('root'));

Answer 2

正如上面的注释中所提到的,按钮的材料设计规范指定文本应该是大写的,但您可以轻松覆盖其CSS属性:

paper-button {
  text-transform: none;
}

Answer 3

受上面 CSS 样式的启发，这里是本地化按钮文本转换的内联样式 -

import {Button} from '@material-ui/core';

// Begin Component Logic
 
<Button style={{textTransform: 'none'}}>
   Hello World
</Button>

// End Component Logic

Answer 4

如果你使用 Mui 5 那么你可以使用 sx语法

<Button sx={{textTransform: "none"}}/>