如何在反应组件中使用样式组件

Question

使用styled-components新手。 我想知道它的用途是什么？ 样式化后我应该如何实现组件生命周期方法？ 为简单起见，我删除了所有其他样式。

import styled from 'styled-components';

const Button = styled.button`
  background-color: 'green'
`

export default Button;

我想知道如何进一步处理这个Button组件？

传统上我们可以声明一个基于类的组件并实现一些生命周期方法，但是现在有了这个styled-components ，我不确定如何将它们组合在一起，因为它们实际上是单个Button组件？

更新：

Button.js的完整源代码。 通过使用以下代码，所有 styles 都将消失，我无法理解问题

import React from 'react';
import styled from 'styled-components';
// import Button from 'react-bootstrap/Button';

import color from '../config/color';

const Button = ({ children, onPress }) => (
  <button type="button" onPress={onPress}>{children}</button>
);

const StyledButton = styled(Button)`
  width: 12rem;
  height: 54px;
  font-size: 1rem;
  background-color: ${(props) => {
    if (props.inverted) return 'white';
    if (props.disabled) return color.disabled;
    return (props.color || color.primary);
  }};
  color: ${(props) => {
    if (props.disabled) return color.disabledText;
    if (props.inverted) return (props.color || color.primary);
    return 'white';
  }};
  border:${(props) => (props.inverted ? `2px solid ${props.color || color.primary}` : 'none')};
  border-radius: 60px;

  &:hover {
    filter: ${(props) => (props.inverted || props.disabled ? 'none' : 'brightness(95%)')}
  }
`;

export default StyledButton;

Answer 1

为了设置自定义反应组件的样式，您可以将自定义组件名称作为参数传递给styled 。 根据文档：

只要将传递的 className 属性附加到 DOM 元素，样式化方法就可以在您自己或任何第三方组件上完美运行。

import React from 'react';
import styled from 'styled-components';
// import Button from 'react-bootstrap/Button';

import color from '../config/color';

const Button = ({ children, className onPress }) => (
  <button type="button" className={className} onPress={onPress}>{children}</button>
);

const StyledButton = styled(Button)`
  width: 12rem;
  height: 54px;
  font-size: 1rem;
  background-color: ${(props) => {
    if (props.inverted) return 'white';
    if (props.disabled) return color.disabled;
    return (props.color || color.primary);
  }};
  color: ${(props) => {
    if (props.disabled) return color.disabledText;
    if (props.inverted) return (props.color || color.primary);
    return 'white';
  }};
  border:${(props) => (props.inverted ? `2px solid ${props.color || color.primary}` : 'none')};
  border-radius: 60px;

  &:hover {
    filter: ${(props) => (props.inverted || props.disabled ? 'none' : 'brightness(95%)')}
  }
`;

export default StyledButton;

阅读styled-component documentation ，了解有关设置任何组件样式的更多详细信息

Answer 2

让我们重命名样式按钮组件，以减少 2 个类似命名的组件之间的混淆。

样式按钮.tsx：

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: 'green'
`

export default StyledButton; 

当您将样式化按钮组件导入Button组件时，您实际上可以像使用传统 HTML <button>元素时通常使用的方式使用它，因为它的道具在样式化组件上也被公开和可用.

按钮.tsx：

import StyledButton from './StyledButton'

class Button extends React.Component {
  componentDidMount() {
    const { someProps, otherProps } = this.props;
    // some lifecycle logic
  }

  handleClick() {
     // do the rest
  }

  render() {
    return <StyledButton onClick={() = this.handleClick()} />;
  }
}

如果您愿意，您甚至可以将属性从父Button组件传递给子StyledButton组件。 这将允许您自定义它。

render() {
  const { color } = this.props;

  return <StyledButton background={color} onClick={() = this.handleClick()} />;
}

在您的 StyledButton 组件上，您只需要进行以下更改：

const StyledButton = styled.button`
  background-color: ${({ color }) => color || 'green'}
`

Answer 3

缺少的其他答案是为自定义组件（如Button ）设置样式，您必须传递一个className属性。

样式是通过className属性注入的。

const ButtonDefaultStyle = styled.button`
  width: 5rem;
`;

const Button = ({ className, children, onPress }) => (
  <ButtonDefaultStyle className={className} type="button" onPress={onPress}>
    {children}
  </ButtonDefaultStyle>
);

export default Button;

然后可以应用styles：

import Button from './Button.js'

// Will override width: 5rem;
const StyledButton = styled(Button)`
  width: 12rem;
`;