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

Question

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

import styled from 'styled-components';

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

export default Button;

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

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

更新：

Button.js 的完整源代码。通过下面的代码，所有样式都将消失，我无法理解问题

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。根据文档：

styled 方法完美适用于您自己或任何 第三方组件，只要它们附加传递的 className prop 到 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

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

styled-button.tsx:

import styled from 'styled-components';

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

export default StyledButton; 

当您将样式按钮组件导入您的 Button 组件时，您实际上可以像使用传统 HTML <button> 元素时通常使用的方式一样使用它，因为它的 props 被暴露并可用样式化的组件也是如此。

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()} />;
  }
}

如果你愿意，你甚至可以将 props 从父组件 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 属性来设置其他答案。

样式是injected through className property。

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

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

export default Button;

然后可以应用样式：

import Button from './Button.js'

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