样式化组件不传递 dom 属性答案

【问题标题】：Styled Components do not pass dom attributes样式化组件不传递 dom 属性
【发布时间】：2021-12-09 22:41:46
【问题描述】：

我是styled-components 的新手，我在react 和typescript 项目中使用它。

我使用了一个样式组件StyledButton，它是用styled.button 创建的，但是当我在顶级组件中传递disabled={true} 属性时，它不会显示在dom 渲染中。样式渲染良好（当禁用按钮为灰色时），但道具 disabled 未传递给 dom 元素按钮（因此它仍然可点击...）

Button.style.ts：

import styled from 'styled-components';
import { fontFamily, fontSize, fontWeight, getSpacing } from '../../stylesheet';

interface StyledButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
  fullWidth?: boolean;
  backgroundColor: string;
  textColor: string;
  borderColor?: string;
  borderRadiusProp: string;
}

export const StyledButton = styled.button<StyledButtonProps>(props => ({
  cursor: 'pointer',
  height: '45px',
  borderRadius: props.borderRadiusProp,
  ...((props.fullWidth ?? false) && {
    width: '100%',
  }),
  padding: '12px 24px',
  color: props.textColor,
  background: props.backgroundColor,
  textAlign: 'center',
  ...(props.borderColor ?? ''
    ? {
        borderWidth: 1,
        borderColor: props.borderColor,
      }
    : {
        border: 'none',
      }),
  ':hover': {
    backgroundColor: props.backgroundColor,
  },
}));

export const ButtonContent = styled.div`
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: ${fontFamily.main};
  font-size: ${fontSize.medium};
  font-weight: ${fontWeight.large};
  margin-right: ${getSpacing(4)};
  margin-left: ${getSpacing(4)};
`;

Button.tsx：

import React from 'react';
import { borderRadius } from 'stylesheet';
import { ButtonContent, StyledButton } from './Button.style';

export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
  fullWidth?: boolean;
  borderRadiusProp?: string;
  backgroundColor: string;
  textColor: string;
  borderColor?: string;
  disabled?: boolean;
  children: React.ReactNode;
}

const Button = ({
  onClick,
  fullWidth,
  borderRadiusProp = borderRadius.m,
  backgroundColor,
  textColor,
  borderColor,
  disabled = false,
  children,
}: ButtonProps): JSX.Element => {
  return (
    <StyledButton
      disabled={disabled}
      onClick={onClick}
      fullWidth={fullWidth}
      borderColor={borderColor}
      borderRadiusProp={borderRadiusProp}
      backgroundColor={backgroundColor}
      textColor={textColor}
    >
      <ButtonContent>{children}</ButtonContent>
    </StyledButton>
  );
};

export default Button;

GradientButton.tsx：

import Button from 'components/Button/Button';
import React from 'react';
import { borderRadius, colorUsage, gradientColors } from 'stylesheet';

interface GradientButtonProps extends React.HTMLProps<HTMLButtonElement> {
  fullWidth?: boolean;
  children: React.ReactNode;
  disabled?: boolean;
  gradient?: keyof typeof gradientColors;
}

export const getColorBackground = (gradients: string[], disabled?: boolean): string => {
  if (disabled ?? false) return colorUsage.buttonDisabled;
  return `linear-gradient(90deg, ${gradients[0]} -27.6%, ${gradients[1]} 111.77%);`;
};

export const getTextColor = (disabled?: boolean): string => {
  if (disabled ?? false) return colorUsage.buttonDisabledText;
  return colorUsage.buttonPrimaryTextColor;
};

const GradientButton = ({
  children,
  gradient = 'blue',
  disabled = false,
  ...rest
}: GradientButtonProps): JSX.Element => {
  const backgroundGradient = getColorBackground(gradientColors[gradient], disabled);
  const textColor = getTextColor(disabled);

  return (
    <Button
      borderRadiusProp={borderRadius.s}
      backgroundColor={backgroundGradient}
      textColor={textColor}
      disabled={disabled}
      {...rest}
    >
      {children}
    </Button>
  );
};

export default GradientButton;

我调用按钮的文件：

  <GradientButton
      id="login-form-button"
      gradient="blue"
      type="submit"
      disabled={!isValid || isEmpty(touched)}
      fullWidth
   >
       Login
   </GradientButton>

【问题讨论】：

如果 disabled 默认为 true 会发生什么？它是否显示为禁用？
disabled 默认为 true，它可以工作，但我不知道为什么
你能检查一下这个最小的复制吗？ codesandbox.io/s/button-disabled-attr-sc-kfdfc 它在那里工作

标签： javascript reactjs styled-components

【解决方案1】：

就像你提到的将disabled 设置为 true（硬编码）它可以工作，这意味着按钮正确呈现，问题似乎与

禁用={!isValid || isEmpty(touched)}

条件可能永远不会评估为真，因此按钮永远不会被禁用。重新检查此条件，它应该可以按预期工作。

【讨论】：