文本字段周围没有边框 - React Material UI答案

【问题标题】：No Border around Textfield - React Material UI文本字段周围没有边框 - React Material UI
【发布时间】：2022-01-03 22:47:57
【问题描述】：

我使用 Material UI 主题。当我使用创建主题添加主题时，它会删除输入字段周围的所有边框： [1]：https://i.stack.imgur.com/qpBuY.png

这是我的主题：

import { createTheme } from '@mui/material/styles';

declare module '@mui/material/styles' {
  interface Theme {}
}

const theme = createTheme({
  // modify colors
  palette: {
    primary: {
      main: '#3f51b5',
    },
    secondary: {
      main: '#ff3d00',
    },
  },
  /* weitere Farben: error: warning, info, success */
  // modify Schriftart
  typography: {
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
  },
});

export default theme;

这是我的主题提供者：

import { ThemeProvider } from '@material-ui/core';
ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <Provider store={store}>
        <App />
      </Provider>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

感谢您的帮助。

【问题讨论】：

标签： javascript reactjs react-hooks material-ui

【解决方案1】：

我找到了答案：在 index.tsx 中有一个错误的 ThemeProvider 导入。

她是正确的：

import { ThemeProvider } from '@mui/material';

【讨论】：

【解决方案2】：

导出您的主题提供程序以将其导入主文件

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。