エラーソース
Material UI(MUI)を使用
HeaderLink/index.tsx
import Link from "@mui/material/Link";
import { Link as RouterLink } from "react-router-dom";
type HeaderLinkProps = {
href: string;
title: string;
onClickLink?: () => void;
};
const HeaderLink: React.VFC<HeaderLinkProps> = ({
title,
href,
onClickLink,
}) => {
return (
<Link
component={RouterLink}
to={href}
onClick={() => {
onClickLink?.();
}}
sx={{
color: "#9d9d9d",
position: "relative",
textDecoration: "none",
"::after": {
position: "absolute",
left: 0,
content: '""',
width: "100%",
height: "2px",
background: "#9d9d9d",
bottom: "-1px",
transform: "scale(0, 1)",
transformOrigin: "center top",
transition: "transform 0.3s",
},
":hover": {
"::after": {
transform: "scale(1, 1)",
},
},
}}
>
{title}
</Link>
);
};
export default HeaderLink;
HeaderLink/index.stories.tsx
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import HeaderLink from ".";
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
title: "Atoms/HeaderLink",
component: HeaderLink,
} as ComponentMeta<typeof HeaderLink>;
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof HeaderLink> = (args) => (
<HeaderLink {...args} />
);
export const Normal = Template.bind({});
Normal.args = {
title: "テストリンク",
href: "#",
};
修正後
HeaderLink/index.stories.tsx
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import HeaderLink from ".";
import { MemoryRouter } from "react-router-dom";
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
title: "Atoms/HeaderLink",
component: HeaderLink,
decorators: [
(Story) => (
<MemoryRouter>
<Story />
</MemoryRouter>
),
],
} as ComponentMeta<typeof HeaderLink>;
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof HeaderLink> = (args) => (
<HeaderLink {...args} />
);
export const Normal = Template.bind({});
Normal.args = {
title: "テストリンク",
href: "#",
};