在反应js中添加css时按钮功能不起作用答案

【问题标题】：Button function not working when adding css in react js在反应js中添加css时按钮功能不起作用
【发布时间】：2021-08-23 20:17:33
【问题描述】：

我有按钮并用于触发其他一些页面。我只是尝试使用样式化组件添加 css，样式应用得很好，但功能不起作用。这意味着如果我删除样式，功能正在工作。如果我添加样式页面未调用函数不起作用。

并建议我如何在此处添加 makestyle！

我在这里展示了我的按钮组件。

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;
  &: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>
    );
  }
}

【问题讨论】：

你为什么期望 <button> 组件支持 component 属性？
我需要触发一些其他的页面，所以我就这样使用了。还有其他方法吗？

标签： javascript html css reactjs

【解决方案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;
  &: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/

【讨论】：