覆盖 Material UI 5 主题中的按钮文本

huangapple
go评论138阅读模式
英文:

Override Material UI 5 Button Text in my theme

问题

我正在尝试将 MuiButton 文本改为小写，但我找不到方法。
我分享代码和截图。

theme.jsx

  1. import { createTheme } from "@mui/material/styles";
  3. export const theme = createTheme({
  4.   palette: {
  5.     mode: "light",
  6.     primary: {
  7.       main: "#E9531E",
  8.     },
  9.     secondary: {
  10.       main: "#4357AD",
  11.     },
  12.   },
  13.   typography: {
  14.     fontFamily: "Roboto",
  15.     textTransform: "none",
  16.   },...
  18. overrides: {
  19.     MuiButton: {
  20.       root: {
  21.         background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
  22.         border: 0,
  23.         borderRadius: 3,
  24.         boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
  25.         color: "white",
  26.         height: 48,
  27.         padding: "0 30px",
  28.         textTransform: "none",
  29.       },
  30.     },

App.jsx

  1. import Navbar from "./components/Navbar";
  2. import Login from "./pages/Login";
  4. function App() {
  5.   return (
  6.     <div className="App">
  7.       <Navbar />
  8.       <Login />
  9.     </div>
  10.   );
  11. }
  13. export default App;

index.jsx

  1. import React from "react";
  2. import ReactDOM from "react-dom/client";
  3. import "./index.css";
  4. import App from "./App";
  5. import { ThemeProvider } from "@mui/material";
  6. import { theme } from "./theme";
  8. const root = ReactDOM.createRoot(document.getElementById("root"));
  9. root.render(
  10.   
  11.   <ThemeProvider theme={theme}>
  12.     
  13.     <App />
  14.     
  15.   </ThemeProvider>
  16. );

全局文本样式更改，但按钮样式不更改。

我尝试过使用 styled，但我不知道如何正确使用它们。

英文:

I'm trying to change the MuiButton text to lowercase but I can't find a way.
I share code and screenshot.

theme.jsx

  1. import { createTheme, } from &quot;@mui/material/styles&quot;;
  3. export const theme = createTheme({
  4.   palette: {
  5.     mode: &quot;light&quot;,
  6.     primary: {
  7.       main: &quot;#E9531E&quot;,
  8.     },
  9.     secondary: {
  10.       main: &quot;#4357AD&quot;,
  11.     },
  12.   },
  13.   typography: {
  14.     fontFamily: &quot;Roboto&quot;,
  15.     textTransform: &quot;none&quot;,
  16.   },...
  18. overrides: {
  19.     MuiButton: {
  20.       root: {
  21.         background: &quot;linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)&quot;,
  22.         border: 0,
  23.         borderRadius: 3,
  24.         boxShadow: &quot;0 3px 5px 2px rgba(255, 105, 135, .3)&quot;,
  25.         color: &quot;white&quot;,
  26.         height: 48,
  27.         padding: &quot;0 30px&quot;,
  28.         textTransform: &quot;none&quot;,
  29.       },
  30.     },

App.jsx

  1. import Navbar from &quot;./components/Navbar&quot;;
  2. import Login from &quot;./pages/Login&quot;;
  4. function App() {
  5.   return (
  6.     &lt;div className=&quot;App&quot;&gt;
  7.       &lt;Navbar /&gt;
  8.       &lt;Login /&gt;
  9.     &lt;/div&gt;
  10.   );
  11. }
  13. export default App;

index.jsx

  1. import React from &quot;react&quot;;
  2. import ReactDOM from &quot;react-dom/client&quot;;
  3. import &quot;./index.css&quot;;
  4. import App from &quot;./App&quot;;
  5. import { ThemeProvider } from &quot;@mui/material&quot;;
  6. import { theme } from &quot;./theme&quot;;
  8. const root = ReactDOM.createRoot(document.getElementById(&quot;root&quot;));
  9. root.render(
  10.   
  11.   &lt;ThemeProvider theme={theme}&gt;
  12.     
  13.     &lt;App /&gt;
  14.     
  15.   &lt;/ThemeProvider&gt;
  16. );

The global text style changes but the button style does not.

I have tried styled but I don't know how to use them well.

答案1

得分: 0

你需要将样式覆盖更改为以下内容：

  1. const theme = createTheme({
  2.   ...,
  3.   components: {
  4.     MuiButton: {
  5.       styleOverrides: {
  6.         root: {
  7.           background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
  8.           border: 0,
  9.           borderRadius: 3,
  10.           boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
  11.           color: "white",
  12.           height: 48,
  13.           padding: "0 30px",
  14.           textTransform: "none",
  15.         },
  16.       },
  17.     },
  18.   },
  19. });

查看文档以获取更多信息：
https://mui.com/material-ui/customization/theme-components/#theme-style-overrides

英文:

You need to change the style overrides to this:

  1. const theme = createTheme({
  2.   ...,
  3.   components: {
  4.     MuiButton: {
  5.       styleOverrides: {
  6.         root: {
  7.           background: &quot;linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)&quot;,
  8.           border: 0,
  9.           borderRadius: 3,
  10.           boxShadow: &quot;0 3px 5px 2px rgba(255, 105, 135, .3)&quot;,
  11.           color: &quot;white&quot;,
  12.           height: 48,
  13.           padding: &quot;0 30px&quot;,
  14.           textTransform: &quot;none&quot;,
  15.         },
  16.       },
  17.     },
  18.   },
  19. });

Check out the docs for more information:
https://mui.com/material-ui/customization/theme-components/#theme-style-overrides

huangapple
  • 本文由 发表于 2023年8月9日 18:40:54
  • 转载请务必保留本文链接：https://go.coder-hub.com/76866962.html
  • material-ui
  • overriding
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定