web-dev-qa-db-ja.com

常に大文字の紙ボタン

Paper-Buttonを使用していますが、ボタンのテキストが常に大文字または通常のケースで大文字になるという問題に直面しています。大文字にするために適用されているCSSまたはJavascriptプロパティがありません。この問題を解決するにはどうすればよいですか。

16
Ajay Beniwal

上記のコメントで述べたように、 ボタンのマテリアルデザインの仕様 はテキストが大文字であることを指定しますが、CSSプロパティを簡単にオーバーライドできます。

paper-button {
  text-transform: none;
}
34
ebidel

同じ問題があり、デフォルトのテーマを調整することで問題を解決しました。次のコードをファイル(任意の名前)に追加します。

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