Я пытаюсь создать стилизованный Button элемент из MUI, но у меня возникает проблема. Код компонента:
import { Button, styled } from '@mui/material';
const ButtonBase = styled(Button)(
{
display: "inline-flex",
gap: "10px",
backgroundColor: "#E9EDF0",
borderRadius: "29px",
boxShadow: [ "-3px -3px 7px #FFFFFF", "3px 3px 7px rgba(0, 0, 0, .2)" ].join(', '),
font: "700 25px/58px 'Open Sans'",
width: "fit-content",
minWidth: "240px",
height: "58px",
lineHeight: "100%",
color: "#215C75",
padding: "0 30px",
textTransform: "none",
"&:hover": { backgroundColor: "#215C75", color: "#FFFFFF" }
}
);
const ButtonOutline = styled(Button)(
{
display: "inline-flex",
gap: "10px",
backgroundColor: "#E9EDF0",
border: "2px solid #215C75",
borderRadius: "29px",
font: "700 25px/58px 'Open Sans'",
width: "fit-content",
minWidth: "240px",
height: "58px",
lineHeight: "100%",
color: "#215C75",
padding: "0 30px",
textTransform: "none",
"&:hover": { backgroundColor: "#215C75", color: "#FFFFFF" }
}
);
const CustomButton =
{
Base: ButtonBase,
Outline: ButtonOutline
};
export default CustomButton;
И тут я пытаюсь его применить, ошибка возникает из-за "component={Link}", почему? (Link от react-router-dom)
<CustomButton.Base
component={Link}
to={"/test"}
sx={{ margin: "auto auto 0 auto" }}
>
Do it again
</CustomButton.Base>
CustomButton.Base
уже лежит кнопка, пропcomponent
не нужен. Если нужна линка, используйstyled.a
import styled from 'styled-components'; import { Link } from 'react-router-dom'; export const ButtonBase = styled(Link)
display: inline-flex; ` `