0
"use client"
import {Navbar, Button, Link, Text} from "@nextui-org/react";
import {styled} from "@nextui-org/react"

const Box = styled("div", {
    boxSizing: "border-box",
});

const AcmeLogo = () => (
    <svg
        className=""
        fill="none"
        height="36"
        viewBox="0 0 32 32"
        width="36"
        xmlns="http://www.w3.org/2000/svg"
    >
        <rect fill="var(--secondary)" height="100%" rx="16" width="100%"/>
        <path
            clipRule="evenodd"
            d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
            fill="currentColor"
            fillRule="evenodd"
        />
    </svg>
);

export const MyNavbar = () => {
    return (
        <Box css={{
            maxW: "100%"
        }}>
            <Navbar isBordered variant="floating">
                <Navbar.Brand>
                    <AcmeLogo/>
                    <Text b color="inherit" hideIn="xs">
                        ACME
                    </Text>
                </Navbar.Brand>
                <Navbar.Content hideIn="xs" variant="highlight-rounded">
                    <Navbar.Link href="#">Features</Navbar.Link>
                    <Navbar.Link isActive href="#">Customers</Navbar.Link>
                    <Navbar.Link href="#">Pricing</Navbar.Link>
                    <Navbar.Link href="#">Company</Navbar.Link>
                </Navbar.Content>
                <Navbar.Content>
                    <Navbar.Link color="inherit" href="#">
                        Login
                    </Navbar.Link>
                    <Navbar.Item>
                        <Button auto flat as={Link} href="#">
                            Sign Up
                        </Button>
                    </Navbar.Item>
                </Navbar.Content>
            </Navbar>
        </Box>
    );
}

This is my MyNavbar component.

"use client";

import * as React from "react";
import {NextUIProvider} from "@nextui-org/react";


export function Providers({children}) {
    return (
        <NextUIProvider>
            {children}
        </NextUIProvider>
    );
}

This is my Providers.

import './globals.css'
import {Inter} from 'next/font/google'
import {MyNavbar} from "@/components/navbar";
import {Providers} from "@/app/provider";

const inter = Inter({subsets: ['latin']})


export const metadata = {
    title: 'Create Next App',
    description: 'Generated by create next app',
}

export default function RootLayout({children}) {
    return (
        <html lang="en">
        <body className={inter.className}>
        <Providers>
            <MyNavbar/>
            {children}
        </Providers>
        </body>
        </html>
    )
}

This is my layout.

When I first opened the website, it was like this. [enter image description here]

Then it will be like this. (https://i.stack.imgur.com/hLuXL.png)

I dont know how to solve it.

how to solve it.Enable CSS to render the interface from the beginning.

北北极冰洋
  • 1
  • HI, I had a similar problem with styled components, in my case I solve the issue changing my import from import {styled} from 'styled-components' to import styled from 'styled-components'. Removing the brackets. Try it. – Saumus Jul 27 '23 at 05:48

0 Answers0