Question

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

Answer 1

正如上面的评论中所提到的，material design spec for buttons指定文本应该是大写的，但您可以轻松覆盖其CSS属性：

paper-button {
  text-transform: none;
}

Answer 2

我遇到了同样的问题，并通过调整默认主题解决了该问题。将以下代码添加到文件（您选择的名称）.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 3

受以上CSS样式的启发，是用于本地化Button文本转换的内联样式-

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

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

// End Component Logic

纸张按钮始终为大写

3 个答案: