哈Ha！ 前几天，我遇到了一篇非常有趣的葡萄牙语文章。 幸运的是，我们设法找到了它的英文版本。 我提请您注意俄语翻译。 您可以在我的Habr页面上找到其他翻译版本。
原始链接：
葡萄牙语 ，
英语对于那些不属于主题的人。 Styled-Components是React和Ract本地开发人员中非常流行的库。 它允许您直接在JS中编写自定义CSS。
在Vue中，我们知道使用单文件组件（SFC）有多方便，因为所有必需的组件都收集在一个地方。 SFC模式极大地提高了Vue的知名度。
在过去的几个月中，我有机会参与了一个关于React的重大项目的开发。 我们在其中使用了样式组件，这是一次非常有趣的体验。
但是，在我的大多数项目中，我自然使用Vue，所以我想将新的体验与样式化组件以及Vue.js生态系统的好处结合起来。 那时我发现这样的解决方案已经存在，并得到与React：
vue-styled-components下类似库相同的创建者的支持。
开始
放置空的聊天记录，然后继续执行代码。 与往常一样，使用yarn或npm。
// for yarn yarn add vue-styled-components // for npm npm install --save vue-styled-components
在我的
github上，您将找到一个包含使用此库的示例的存储库。
示例中使用的每个元素都可以由vue样式的组件作为具有其各自属性的隔离组件进行处理，也可以通过从其他组件接收数据进行处理。
我们的第一个示例只是具有默认样式的按钮。
import styled from "vue-styled-components"; const CButton = styled.button` font-size: 1em; text-align: center; color: #FFFFFF; border-radius: 5px; padding: 10px 15px; background-color: #0057AA; `; export default CButton;
在我们应用程序中的任何地方，我们都可以使用此组件。
import CButton from '@/components/elements/Button' export default { name: 'app', components: { CButton }, }
传递参数
在vue样式的组件中，您可以通过将这些值传递给属性来动态定义组件的样式。 本示例说明，当传递main属性时，按钮将接收新的背景样式和字体颜色。
import styled from "vue-styled-components"; const typeButton = { primary: Boolean }; const CButtonProps = styled('button', typeButton)` font-size: 1em; text-align: center; color: ${props => props.primary ? '#0057AA' : '#FFFFFF'}; border-radius: 5px; padding: 10px 15px; background-color: ${props => props.primary ? '#FFFFFF' : '#0057AA'}; `; export default CButtonProps;
上面的示例可以进行改进，甚至可以添加新的属性（可以根据需要传递任意数量的属性）。 在项目中一切都根据您的需求进行。
在这个库的帮助下，我们有机会通过逻辑来管理样式。 在下面的示例中，您可以选择要分配给按钮的颜色方案，而又不影响其他颜色，从而使您的应用程序多样化。
import styled from "vue-styled-components"; const typeButton = { type: String, radius: Boolean }; const styleButton = type => { switch (type) { case "primary": return ` background-color: #FFFFFF; color: #0057AA; `; case "error": return ` background-color: #B4000B; color: #FDFDFD; `; case "success": return ` background-color: #00C887; color: #37435F; `; default: return ` background-color: #0057AA; color: #FFFFFF; `; } } const CButtonPropsCond = styled('button', typeButton)` font-size: 1em; text-align: center; padding: 10px 15px; border-radius: ${({ radius }) => radius ? "6px" : null}; ${(props) => styleButton(props.type)} `; export default CButtonPropsCond;
为了更好地说明创建此按钮的过程：我们首先（始终）导入vue样式的组件，紧接着（从第3行到第6行）我们需要确定将什么类型的属性传递给该组件。 从第8行到第31行，我们创建一个函数，该函数采用type属性的值，根据传递的内容，它返回背景的属性。 颜色和各自寄存器的颜色，如果没有作为属性传递，则将为按钮分配默认值。
借助这些知识，您可以实现新属性，从而使您的自定义组件非常动态。
我将这些小示例留在GitHub中，以便您可以迈出第一步来精通此库。 好好享受
链接到示例库 。