英文:
Material-ui AppBar component not changing background-color
问题
以下是您提供的内容的翻译：
我在我的React应用程序中遇到了这个错误已经有一段时间了，但似乎找不到解决方法或逻辑解释。我正在使用Material-UI v6和styled-components。
我有这个样式化组件（AppBar.styled.js）：
import styled from "styled-components";
import { AppBar } from "@mui/material";
const StyledAppBar = styled(AppBar)`
margin: 20px; //${(props) => props.theme.palette.tertiary.main};
background-color: darkorange;
`;
export default StyledAppBar;
奇怪的是，margin属性正确应用于应用栏，但background-color没有：
我似乎找不出原因，也找不到解决方法。有人可以解释发生了什么以及我如何解决吗？我已经尝试添加StyledEngineProvider，但仍然没有变化。这是App.js的样子：
import { Fragment } from "react";
import GlobalStyles from "./components/styles/Global";
import darkTheme from "./components/styles/darkTheme";
import lightTheme from "./components/styles/lightTheme";
import { ThemeProvider } from "styled-components";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomePage from "./pages/Home";
import HelpPage from "./pages/Help";
import NavigationBar from "./components/NavigationBar";
const router = createBrowserRouter([
{ path: "/", element: <HomePage /> },
{ path: "/help", element: <HelpPage /> },
]);
function App() {
const theme = lightTheme;
return (
<ThemeProvider theme={theme}>
<Fragment>
<GlobalStyles></GlobalStyles>
<NavigationBar></NavigationBar>
<RouterProvider router={router}></RouterProvider>
</Fragment>
</ThemeProvider>
);
}
export default App;
英文:
I have been in this error for quite a while now in my React application but can't seem to find a solution nor a logical explanation. I'm using Material-UI v6 and styled-components.
I have this styled component (AppBar.styled.js):
import styled from "styled-components";
import { AppBar } from "@mui/material";
const StyledAppBar = styled(AppBar)`
margin: 20px; //${(props) => props.theme.palette.tertiary.main};
background-color: darkorange;
`;
export default StyledAppBar;
And curiously, the margin property is correctly applied to the appbar but the background-color is not:
I can't seem to figure out why nor a solution. Can some one care to exaplain what is happening and how can I solve this? I already tried to add the StyledEngineProvider but still no changes. This is how the App.js looks like:
import { Fragment } from "react";
import GlobalStyles from "./components/styles/Global";
import darkTheme from "./components/styles/darkTheme";
import lightTheme from "./components/styles/lightTheme";
import { ThemeProvider } from "styled-components";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomePage from "./pages/Home";
import HelpPage from "./pages/Help";
import NavigationBar from "./components/NavigationBar";
const router = createBrowserRouter([
{ path: "/", element: <HomePage /> },
{ path: "/help", element: <HelpPage /> },
]);
function App() {
const theme = lightTheme;
return (
<ThemeProvider theme={theme}>
<Fragment>
<GlobalStyles></GlobalStyles>
<NavigationBar></NavigationBar>
<RouterProvider router={router}></RouterProvider>
</Fragment>
</ThemeProvider>
);
}
export default App;
答案1
得分: 0
我找到了一个解决方案，即使用"!important"关键字，但这不是推荐的方法。但还有另一个诀窍：在App.js中的返回JSX代码中使用<StyledEngineProvider injectFirst>...</StyledEngineProvider>，这是正确且有效的解决方法。
它也被官方文档推荐使用。
英文:
I found a solution, which was to use the "!important" keyword but this is not recommended. But there is another trick: the correct and working solution is to use <StyledEngineProvider injectFirst>...</StyledEngineProvider> in the returning JSX code in the App.js.
It is also recommended by the official documentation.
答案2
得分: -1
另一种实现这一目标的方式是通过更改主题。您可以在此示例中查看。
英文:
Another way to achive this is by changing it from theme. You can see in this example.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论