React 中的 InputProps Material-UI

Question

我必須將 material-ui 中的TextField設為大寫。 現在，我需要將inputProps={{ style: { textTransform: 'uppercase' } }}放在所有TextField中。 所以我在我的反應應用程序中為此定義了一個主題，我想要一些看起來像這樣的東西。

還請檢查我如何做的圖片

https://i.stack.imgur.com/lnukB.png

MuiTextField.js

export default {
  root: {
    textTransform: 'capitalize',
  },
};

Answer 1

您可以創建一個theme並覆蓋textTransform以在項目的每個MuiInputBase class 中capitalize ，如下所示：

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        textTransform: "uppercase"
      }
    }
  }
});

然后將您的項目包裝在ThemeProvider中並將theme作為道具傳遞給ThemeProvider ：

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Demo />
  </ThemeProvider>,
  document.querySelector("#root")
);

沙盒鏈接

使用此方法，您不再需要手動將textTransform: "capitalize"添加到每個TextField組件。