0

Я пытаюсь создать стилизованный 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>
8
  • У тебя в CustomButton.Base уже лежит кнопка, проп component не нужен. Если нужна линка, используй styled.a Commented 23 сент. 2022 в 20:42
  • А по другому никак? Commented 24 сент. 2022 в 0:44
  • Мне нужен Link от react-router-dom Commented 24 сент. 2022 в 1:02
  • Можно, import styled from 'styled-components'; import { Link } from 'react-router-dom'; export const ButtonBase = styled(Link) display: inline-flex; ` ` Commented 24 сент. 2022 в 13:48
  • Стили вставлять как тут styled-components.com без camelCase и кавычек Commented 24 сент. 2022 в 13:51

1 ответ 1

0

При использовании тайп скрипт, как в моем случае, можно привести тип после styled к Button. Делается это примерно так:

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" }
    }
) as typeof Button;

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" }
    }
) as typeof Button;

const CustomButton =
{
    Base: ButtonBase,
    Outline: ButtonOutline
};

export default CustomButton;


Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.