Javascript 如何使用样式化组件显示某些值？

我不熟悉样式化组件，有点困惑。

---

我们可以显示一些东西或向样式化组件添加功能吗。

---

或者样式化组件是我们只能应用css的组件

样式化组件主要用于应用css

因此，通常您会使用提供内容的包装器组件，并使用从样式化组件获得的组件进行装饰

偶尔，我会发现使用构造函数传递

子项

是很有用的 内容针对组件非常具体

const ResourceMissingError=styled.div.attrs({
子项：“找不到此资源”
})`颜色：红色；
render（）；

---

我们可以显示一些东西或向样式化组件添加功能吗

是的，样式化组件可以像任何本机组件一样使用。因此，正如HTML的

可以用来显示某些内容一样，您也可以使用样式化的按钮来显示。见下文

类似地，您可以像在本机组件中一样添加功能，例如，通过侦听单击事件。下面的演示通过处理点击事件将功能“添加”到

ColorfulButton

另请参见如何通过

mycolor=“green”

将颜色作为道具传递给

ColorfulButton

：

const ColorfulButton=styled.button`
显示：内联块；
颜色：${props=>props.mycolor | |“blue”}；
字号：1em；
边缘：1米；
填充物：0.25em 1米；
边框：2倍纯色淡紫色；
边界半径：3px；
显示：块；
`;
类TodoApp扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={text:“学习JavaScript（单击我）”，done:true}
}
handleClick=e=>{
this.setState（{…this.state，done:！this.state.done}）；
}
render（）{
返回(
{this.state.text}


{this.state.done？'Yes'：'No'}
)
}
}
ReactDOM.render（，document.querySelector（#app））

您可以创建一个CSS文件并将其导入到不同的组件中，比如在CSS中创建类，然后在组件中使用该类作为

className=“”

。另外，您可以这样引用内联CSS

style={{}

确保像

font-size

这样的属性名称将在内联CSS中写入

fontSize

。每个在属性名称中间有一个破折号的CSS属性，DASH将被删除，DASH后的下一个字母将被大写，并且属性值将在双引号或单引号中。

“我们可以向样式部件显示一些东西或添加功能”哪个功能？你想展示什么？请详细说明，如果我有一个组件，它需要一些道具，并根据某些条件更改此值，然后返回一些东西，该怎么办？我可以用styled-component设置这个组件的样式吗？如果我有一个组件，它接受一些道具，并根据一些条件更改这个值，然后返回一些东西呢？它是如何返回这个东西的？返回一些值来渲染我的意思是它与

${props=>props.mycolor | |“blue”有什么不同上面演示中的部分？