im new to coding, im learning by my own but I found a problem that I dont know how to resolve.
I want a background image in the body but im using antdesing and i cant modify styles in the layout component neither in a div before the component, pls I love some tips
I tried Adding style to the first layout component but nothing happens, and tried to name a classname, tried to add a div before all but nothing happens
import { Layout } from "antd";
import { Outlet } from "react-router-dom";
import Navbar from "../components/Navbar";
import Sidebar from "../components/Sidebar";
import { Col, Row } from "antd";
import Logo from "../components/Logo";
import { useState } from "react";
import Spinload from "../components/Spinload";
const { Header, Footer, Sider, Content } = Layout;
function Main() {
const [siderCollapsed, setsiderCollapsed] = useState(true);
return (
<>
<Layout style={{ height: "100vh" }}>
<Header>
<Row justify="space-between" align="middle">
<Col span={6}>
<Logo />
</Col>
<Col span={18}>
<Navbar />
</Col>
</Row>
</Header>
<Layout>
<Sider
collapsible
trigger={null}
collapsed={siderCollapsed}
onMouseEnter={() => setsiderCollapsed(false)}
onMouseLeave={() => setsiderCollapsed(true)}
>
<Sidebar />
</Sider>
<Layout>
<Content>
<Spinload />
<Outlet />
</Content>
<Footer>Footer</Footer>
</Layout>
</Layout>
</Layout>
</>
);
}
export default Main;
i tried to modify style inline body from the index but i dont know how to do that my index look like this
import store from "./store/Store";
import { StrictMode } from "react";
import { Provider } from "react-redux";
import ReactDOM from "react-dom/client";
import Router from "./router/router";
import { ConfigProvider, theme } from "antd";
import "antd/dist/reset.css";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<ConfigProvider
theme={{
algorithm: theme.defaultAlgorithm,
}}
>
<Provider store={store}>
<StrictMode>
<Router />
</StrictMode>
</Provider>
</ConfigProvider>
);
sorry for my english, im not native