我想知道我如何从这个网站自定义背景颜色和文本颜色https://www.material-tailwind.com/docs/react/navbar
import React from "react";
import {
Navbar,
Collapse,
Typography,
Button,
IconButton,
List,
ListItem,
Menu,
MenuHandler,
MenuList,
MenuItem,
} from "@material-tailwind/react";
import {
ChevronDownIcon,
Bars3Icon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import {
Bars4Icon,
GlobeAmericasIcon,
NewspaperIcon,
PhoneIcon,
RectangleGroupIcon,
SquaresPlusIcon,
SunIcon,
TagIcon,
UserGroupIcon,
} from "@heroicons/react/24/solid";
const navListMenuItems = [
{
title: "Products",
description: "Find the perfect solution for your needs.",
icon: SquaresPlusIcon,
},
{
title: "About Us",
description: "Meet and learn about our dedication",
icon: UserGroupIcon,
},
{
title: "Blog",
description: "Find the perfect solution for your needs.",
icon: Bars4Icon,
},
{
title: "Services",
description: "Learn how we can help you achieve your goals.",
icon: SunIcon,
},
{
title: "Support",
description: "Reach out to us for assistance or inquiries",
icon: GlobeAmericasIcon,
},
{
title: "Contact",
description: "Find the perfect solution for your needs.",
icon: PhoneIcon,
},
{
title: "News",
description: "Read insightful articles, tips, and expert opinions.",
icon: NewspaperIcon,
},
{
title: "Products",
description: "Find the perfect solution for your needs.",
icon: RectangleGroupIcon,
},
{
title: "Special Offers",
description: "Explore limited-time deals and bundles",
icon: TagIcon,
},
];
function NavListMenu() {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
const renderItems = navListMenuItems.map(
({ icon, title, description }, key) => (
<a href="#" key={key}>
<MenuItem className="flex items-center gap-3 rounded-lg">
<div className="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 ">
{" "}
{React.createElement(icon, {
strokeWidth: 2,
className: "h-6 text-gray-900 w-6",
})}
</div>
<div>
<Typography
variant="h6"
color="blue-gray"
className="flex items-center text-sm font-bold"
>
{title}
</Typography>
<Typography
variant="paragraph"
className="text-xs !font-medium text-blue-gray-500"
>
{description}
</Typography>
</div>
</MenuItem>
</a>
),
);
return (
<React.Fragment>
<Menu
open={isMenuOpen}
handler={setIsMenuOpen}
offset={{ mainAxis: 20 }}
placement="bottom"
allowHover={true}
>
<MenuHandler>
<Typography as="div" variant="small" className="font-medium">
<ListItem
className="flex items-center gap-2 py-2 pr-4 font-medium text-gray-900"
selected={isMenuOpen || isMobileMenuOpen}
onClick={() => setIsMobileMenuOpen((cur) => !cur)}
>
Resources
<ChevronDownIcon
strokeWidth={2.5}
className={`hidden h-3 w-3 transition-transform lg:block ${
isMenuOpen ? "rotate-180" : ""
}`}
/>
<ChevronDownIcon
strokeWidth={2.5}
className={`block h-3 w-3 transition-transform lg:hidden ${
isMobileMenuOpen ? "rotate-180" : ""
}`}
/>
</ListItem>
</Typography>
</MenuHandler>
<MenuList className="hidden max-w-screen-xl rounded-xl lg:block">
<ul className="grid grid-cols-3 gap-y-2 outline-none outline-0">
{renderItems}
</ul>
</MenuList>
</Menu>
<div className="block lg:hidden">
<Collapse open={isMobileMenuOpen}>{renderItems}</Collapse>
</div>
</React.Fragment>
);
}
function NavList() {
return (
<List className="mt-4 mb-6 p-0 lg:mt-0 lg:mb-0 lg:flex-row lg:p-1">
<Typography
as="a"
href="#"
variant="small"
color="blue-gray"
className="font-medium"
>
<ListItem className="flex items-center gap-2 py-2 pr-4">Home</ListItem>
</Typography>
<NavListMenu />
<Typography
as="a"
href="#"
variant="small"
color="blue-gray"
className="font-medium"
>
<ListItem className="flex items-center gap-2 py-2 pr-4">
Contact Us
</ListItem>
</Typography>
</List>
);
}
export function NavbarWithMegaMenu() {
const [openNav, setOpenNav] = React.useState(false);
React.useEffect(() => {
window.addEventListener(
"resize",
() => window.innerWidth >= 960 && setOpenNav(false),
);
}, []);
return (
<Navbar className="mx-auto max-w-screen-xl px-4 py-2">
<div className="flex items-center justify-between text-blue-gray-900">
<Typography
as="a"
href="#"
variant="h6"
className="mr-4 cursor-pointer py-1.5 lg:ml-2"
>
Material Tailwind
</Typography>
<div className="hidden lg:block">
<NavList />
</div>
<div className="hidden gap-2 lg:flex">
<Button variant="text" size="sm" color="blue-gray">
Log In
</Button>
<Button variant="gradient" size="sm">
Sign In
</Button>
</div>
<IconButton
variant="text"
color="blue-gray"
className="lg:hidden"
onClick={() => setOpenNav(!openNav)}
>
{openNav ? (
<XMarkIcon className="h-6 w-6" strokeWidth={2} />
) : (
<Bars3Icon className="h-6 w-6" strokeWidth={2} />
)}
</IconButton>
</div>
<Collapse open={openNav}>
<NavList />
<div className="flex w-full flex-nowrap items-center gap-2 lg:hidden">
<Button variant="outlined" size="sm" color="blue-gray" fullWidth>
Log In
</Button>
<Button variant="gradient" size="sm" fullWidth>
Sign In
</Button>
</div>
</Collapse>
</Navbar>
);
}
字符串
我想改变背景颜色,活动,焦点,访问等样式的框架说。你能给予我一个建议如何做。谢谢
1条答案
按热度按时间iyfjxgzm1#
考虑检查theming guide on the Material Tailwind website:
自定义@material-tailwind/react主题。您可以更改基本样式,如颜色,排版,框阴影和断点以及组件样式。
@material-tailwind/react带有一个
ThemeProvider
组件,您可以使用它来设置自己的主题或使用@material-tailwind/react提供的默认主题。主题提供者
ThemeProvider
组件给予使用和自定义默认主题的能力,或者为@material-tailwind/react设置自己的主题。您需要使用
ThemeProvider
组件 Package 您的组件或整个应用程序才能使用主题。字符串
[...]
主题对象结构
主题对象是一个包含所有组件样式对象的普通对象。所有组件样式都可以在主题对象中使用,并且这些样式对象具有用于不同用例的唯一格式。
型
| 关键|描述|
| --|--|
|
theme
个|它是应该作为ThemeProvider
的值传递的主主题对象。||
component
个|这是你想要自定义的组件的名称。例如按钮。||
defaultProps
个|用于更改组件的默认属性值。||
valid
个|用于更改组件 prop 验证的有效值。||
styles
个|用于更改组件的样式。|要了解有关如何为特定组件自定义组件主题对象的更多信息,请查看组件文档页面。
因此,以
Navbar
为例,我们可以参考其文档页面,根据您的需要定制其主题:型