Блог

Главная - Вопросы по программированию - Функция кнопки не работает при добавлении css в react js

Функция кнопки не работает при добавлении css в react js

#javascript #html #css #reactjs

Вопрос:

у меня есть кнопка и используется для запуска некоторых других страниц. я просто пытаюсь добавить css с использованием стилизованных компонентов, стили применяются идеально, но функция не работает. это означает, что функция работает, если я удалю стили. если я добавлю стили, страница, не вызываемая функцией, не будет работать.

и подскажите мне, как добавить стили макияжа здесь!

здесь я показал свой компонент кнопки здесь.

 import React from "react";
import Button from "@material-ui/core/Button";
import Popover from "@material-ui/core/Popover";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import AddIcon from "@material-ui/icons/Add";
import ComponentType from "../ComponentType";
import { Link } from "react-router-dom";
import styled from "styled-components";

// StyledButton

const TriggerButton = styled.button`
cursor: pointer;
  outline: none;
  position: relative;
  z-index: 3;
  background: transparent;
  border-color: #664e96;
  border-style: solid;
  border-width: 2px;
  border-radius: 22px;
  padding: 10px 25px;
  font-size: 11px;
  text-transform: uppercase;
  transition: all 0.2s linear;
  amp;:hover {
    background: #664e96;
    color: #fff;
  }
`;

export default class AddTriggerButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      props: props,
    };
  }

  render() {
    
    return (
      <div>
        <TriggerButton
          component={Link}
          to={{
            pathname: "/_triggers/create",
            data: { eid: this.state.props.record.id },
          }}
          startIcon={<AddIcon />}
        >
          New Trigger
          </TriggerButton>
      </div>
    );
  }
}

Комментарии:

1. Почему вы ожидаете <button> , что компонент будет поддерживать component опору?

2. мне нужно запустить несколько других страниц, поэтому я использовал это. есть ли какой-нибудь другой способ?

Ответ №1:

Таким образом, вы хотите использовать кнопку MUI, изменить ее компонент на стилизованный и использовать его для навигации с помощью маршрутизатора react, это один из подходов:

 import React from "react";
import Button from "@material-ui/core/Button";
import Popover from "@material-ui/core/Popover";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import AddIcon from "@material-ui/icons/Add";
import ComponentType from "../ComponentType";
import { Link } from "react-router-dom";
import styled from "styled-components";

// StyledButton
const StyledLink = styled(Link)`
  cursor: pointer;
  outline: none;
  position: relative;
  z-index: 3;
  background: transparent;
  border-color: #664e96;
  border-style: solid;
  border-width: 2px;
  border-radius: 22px;
  padding: 10px 25px;
  font-size: 11px;
  text-transform: uppercase;
  transition: all 0.2s linear;
  amp;:hover {
    background: #664e96;
    color: #fff;
  }
`;

const TriggerButton = ({ children, to, ...props }) => {
  const CustomLink = React.useMemo(
    () =>
      React.forwardRef((linkProps, ref) => (
        <StyledLink ref={ref} to={to} {...linkProps} />
      )),
    [to]
  );

  return (
    <Button {...props} component={CustomLink}>
      {children}
    </Button>
  );
};

export default class AddTriggerButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      props: props
    };
  }

  render() {
    return (
      <div>
        <TriggerButton
          to={{
            pathname: "/_triggers/create",
            data: { eid: this.state.props.record.id }
          }}
          startIcon={<AddIcon />}
        >
          New Trigger
        </TriggerButton>
      </div>
    );
  }
}

Пример https://codesandbox.io/s/stoic-parm-fntxg

Есть лучшие способы повторного использования этого, но это способ объединить их вместе, взгляните на https://material-ui.com/guides/composition/

Метки: