Javascript 如何在react组件中使用样式化组件

使用

样式化组件的新手总数

。我想知道它有什么用？在对组件进行样式化之后，我应该如何实现组件生命周期方法？为了简单起见，我删除了所有其他样式

从“样式化组件”导入样式化；
const Button=styled.Button`
背景色：“绿色”
`
导出默认按钮；

我想知道如何进一步处理这个

按钮

组件

传统上，我们可以声明一个基于类的组件并实现一些生命周期方法，但是现在有了这个

样式化组件

，我真的不知道如何将它们组合在一起，因为它们实际上是单个

按钮

组件

更新：

Button.js

的完整源代码。通过使用下面的代码，所有样式都将消失，我无法理解这个问题

从“React”导入React；
从“样式化组件”导入样式化；
//从“反应引导/按钮”导入按钮；
从“../config/color”导入颜色；
常量按钮=（{children，onPress}）=>(
{儿童}
);
const StyledButton=styled（按钮）`
宽度：12雷姆；
高度：54px；
字号：1rem；
背景色：${（道具）=>{
如果（道具倒置）返回“白色”；
如果（道具禁用）返回color.disabled；
返回（props.color | | color.primary）；
}};
颜色：${（道具）=>{
如果（禁用道具）返回color.disabledText；
if（props.inversed）返回（props.color | | color.primary）；
返回“白色”；
}};
边框：${（props）=>（props.inversed？`2px solid${props.color | | color.primary}`:'none'）；
边界半径：60px；
&：悬停{
过滤器：${（props）=>（props.inversed | | props.disabled？'none'：'brightness（95%））}
}
`;
导出默认样式按钮；

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

styled-button.tsx：

import styled from 'styled-components';

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

export default StyledButton; 

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

当您将样式化按钮组件导入到

按钮

组件中时，您实际上可以像处理传统HTML

元素时那样使用它，因为它的道具也在样式化组件上公开和可用

button.tsx：

import styled from 'styled-components';

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

export default StyledButton; 

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

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

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

---

要设置自定义组件的样式，可以将自定义组件名称作为参数传递给

styled

。根据该文件：

样式化方法在您自己或任何其他应用程序上都能完美地工作 第三方组件，只要它们附加传递的类名 道具到DOM元素

从“React”导入React；
从“样式化组件”导入样式化；
//从“反应引导/按钮”导入按钮；
从“../config/color”导入颜色；
常量按钮=（{children，className onPress}）=>(
{儿童}
);
const StyledButton=styled（按钮）`
宽度：12雷姆；
高度：54px；
字号：1rem；
背景色：${（道具）=>{
如果（道具倒置）返回“白色”；
如果（道具禁用）返回color.disabled；
返回（props.color | | color.primary）；
}};
颜色：${（道具）=>{
如果（禁用道具）返回color.disabledText；
if（props.inversed）返回（props.color | | color.primary）；
返回“白色”；
}};
边框：${（props）=>（props.inversed？`2px solid${props.color | | color.primary}`:'none'）；
边界半径：60px；
&：悬停{
过滤器：${（props）=>（props.inversed | | props.disabled？'none'：'brightness（95%））}
}
`;
导出默认样式按钮；

---

有关设置任何组件的样式的更多详细信息，请阅读

其他答案所缺少的是设置自定义组件的样式，如

按钮

您必须传递

类名

prop

样式很简单

---

六羟甲基三聚氰胺六甲醚。。你想用这个组件中的样式化按钮做什么？@wentjun:我想我不太理解这个概念。传统上我会在

button.js

中定义

button

组件。我正在考虑使用

样式化组件

来对其进行样式化？您可以像使用任何其他组件一样使用它。。！让我写一个例子。谢谢你的回答，当我阅读文档时，我有完全相同的想法，但我没有实现它。你能看看我更新的代码，看看哪个部分出错了吗？因为一旦我实现了，这种风格就消失了this@issac，您需要将classsName传递给要设置样式的DOM元素。根据doc的说法：

样式化方法在您自己或任何第三方组件上都能完美工作，只要它们将传递的className prop附加到DOM元素上。

很高兴能提供帮助（y）

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;
`;