React MUI未样式化组件

In React， Material-UI 是一个流行的库，用于创建符合Google Material Design指南的用户界面。该库提供了一组样式化组件，您可以在React应用程序中使用，例如按钮、输入框和纸张。

未样式化组件 是指未使用Material-UI预定义样式的组件。这意味着您可以使用Material-UI组件的基本结构，但必须提供自己的样式来自定义组件的外观。一些内置的方式来提供样式或为未样式化的组件提供自定义样式包括： :

自定义主题： Material-UI提供了一个自定义主题的方法，以匹配您品牌的视觉身份，通过使用createTheme函数。这允许您更改未样式化组件的颜色调色板、字体和其他样式选项。
覆盖样式： Material-UI允许您通过使用withStyles高阶组件来覆盖其组件的默认样式。这可用于为使用Material-UI样式类的未样式化组件添加自定义样式。

语法：

import { MyComponent } from '@mui/base';
return (
    <MyComponent />
):

创建React项目：

步骤1： 要创建一个React应用程序，你需要通过npm命令在你当前的代码库中安装React模块。

npm create-react-app ./

步骤2： 要使用未经样式化的Material-UI组件，你可以从@mui/base/模块中导入它，并像其他组件一样使用。要将其安装到你的项目中，请运行以下命令之一，以添加MUI Base：

npm install @mui/base

步骤3: 使用styled-components运行以下命令:

npm install @mui/material @emotion/react @emotion/styled

项目结构： 项目结构应如下所示：

React MUI未样式化组件

运行应用程序的步骤：

npm start

示例1: 这里是一个使用未样式化的按钮组件的示例：

App.js

import React from 'react'; 
  
import { ButtonUnstyled } from '@mui/base'; 
import { Button } from '@mui/material'; 
import { Typography } from '@mui/material'; 
  
const App = () => { 
    return ( 
        <> 
            <Typography variant='h1' color="green"> 
                WELCOME TO GEEK FOR GEEKS  
            </Typography> 
            <ButtonUnstyled>start</ButtonUnstyled> 
            <Button color="secondary" 
                    style={{ margin: '10px 10px' }}  
                    variant='contained' > 
                 start 
            </Button> 
        </> 
    ); 
} 
  
export default App;

index.js

import React from "react"; 
import  ReactDOM  from "react-dom"; 
import App from './App'; 
  
ReactDOM.render(<App />,document.getElementById('root'));

输出：

React MUI未样式化组件

示例2： 以下是使用未样式化的输入组件的示例：

App.js

import React from 'react'; 
  
import { InputUnstyled } from '@mui/base'; 
import { Typography } from '@mui/material'; 
import { Input } from '@mui/material'; 
const App = () => { 
    return ( 
        <> 
            <Typography variant='h1' color="green"> 
                WELCOME TO GEEK FOR GEEKS 
            </Typography> 
            <InputUnstyled /> 
            <Input placeholder="Placeholder" 
                   style={{ margin: '10px ' }} /> 
        </> 
    ); 
} 
  
export default App;

index.js

import React from "react"; 
import  ReactDOM  from "react-dom"; 
import App from './App'; 
  
ReactDOM.render(<App />,document.getElementById('root'));

输出：

React MUI未样式化组件