用风格化组件为Vue.js配色

前端小工
443 阅读6分钟

随着网络开发能力和工具的发展，网络开发框架的样式也反映了这种发展。从内联样式转向CSS-in-JS解决方案，使开发体验更加一致。

有了styled-components库，开发者可以在JavaScript或JavaScript框架内利用CSS，而不是在造型时创建传统的独立CSS文件。它在React中获得了巨大的成功，现在它也可以用于Vue项目。

在这篇文章中，我们将看到为什么在Vue中使用styled-components进行样式设计是有优势的。

Vue.js中styled-components的优势

建立你自己的组件

样式化组件让你可以在Vue中自由制作自己的自定义样式化组件。你可以对HTML标签进行样式设计，并给它们起一个你选择的名字，使你的代码更易读。

无类政策

有了styled-components，一切都在道具的帮助下完成。你可以动态地改变你的组件的风格而不使用类。它让你有能力在风格化组件的字符串字面中使用三元运算符。

并行设计

风格化组件使你的组件的风格化和设计在整个应用程序中并发和相似，而不需要太多的努力。主题化功能为定义基本的设计元素（如颜色、大小和间距）提供了一个中心位置，并且可以轻松地集成到应用程序中的所有组件中。

一个巨大的社区

看到了巨大的增长，风格化组件社区为任何问题提供帮助，并为开发者提供了一个受欢迎的库。

现在我们已经看到了styled-components的好处，现在是时候在我们的Vue项目中安装这个库，并看看我们如何使用它的不同功能。

在Vue.js中安装styled-components

在安装该库之前，先在本地机器上建立并运行一个Vue项目。设置好项目后，用以下命令安装库。

npm i vue-styled-components

如果你使用Vue CLI来设置项目，文件夹结构会是这样的。

Vue CLI Project Folder

从我们的Vue应用中删除了所有的样式，HelloWorld.vue ，看起来像下面这样。

// HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

让我们运行该项目，在浏览器中看到以下输出。

Vue App Output In Browser

正如我们所看到的，有一个简单的h1 header标签，没有应用任何样式。我们将用styled-components为这个h1 ，我们必须在src 目录下创建一个新的文件夹来存储它们。在该文件夹中，创建一个Header.js 文件。项目结构将如下所示。

H1 Styled-Components Folder

然后，在Header.js 中添加以下几行代码。

import styled from "vue-styled-components";

export const StyledHeader = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: red;
  background-color: grey;
`;

最后，我们可以在HelloWorld.vue 中注册StyledHeader ，用它来代替h1 。

<template>
  <div class="hello">
    <StyledHeader>{{ msg }}</StyledHeader>
  </div>
</template>

<script>
import {StyledHeader} from "../styled-components/Header"
export default {
  name: 'HelloWorld',
  components:{
    StyledHeader
  },
  props: {
    msg: String
  }
}
</script>

现在，让我们启动服务器，看看平淡无奇的标题标签如何变化。

The Header Tag Changes

正如我们所看到的，所需的样式已经被应用，而没有使用任何CSS

在styled-components中传递props

样式化组件，像其他组件一样，有接受道具的能力。例如，我们可以创建一个输入字段并向其传递一个道具。在这里，我们将在components 文件夹中创建一个名为Input.js 的新组件，并向它添加以下代码。

import styled from "vue-styled-components";

export const StyledInput = styled.input`
  font-size: 1.25em;
  padding: 0.5em;
  margin: 0.5em;
  color: blueviolet;
  border: none;
  background-color: lavender;
  border-radius: 3px;

  &:hover {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
  }
`;

下一步是在HelloWorld.vue 中使用它。

<template>
  <div class="hello">
    <StyledHeader>{{ msg }}</StyledHeader>
    <StyledInput/>  
  </div>
</template>

<script>
import {StyledInput} from "../styled-components/Input"
import {StyledHeader} from "../styled-components/Header"

export default {
  name: 'HelloWorld',
  components:{
    StyledInput,StyledHeader
  },
     props: {
    msg: String
  }

}
</script>

保存这些变化将在浏览器中反映出来，确认我们的输入被呈现。

Render The Input Field In The Browser

但是，如果没有一个合适的输入，这看起来很奇怪。让我们把它作为一个道具和类型一起传递给StyledInput 。

<template>
  <div class="hello">
  <StyledHeader>{{ msg }}</StyledHeader>
  <StyledInput placeholder="Password" type="text"/>  
  </div>
</template>

...

运行这个，我们会得到以下输出。

Styled Input Appears In Browser

在Vue.js中使用道具进行动态造型

这是styled-components最强大的功能之一。它允许开发者在不使用大量类的情况下设置动态样式。

因为styled-components可以接受道具并根据道具应用样式，让我们给自定义道具StyledHeader 。

让我们修改一下我们的Header.js 文件，如下所示。

import styled from "vue-styled-components";
const hdrProps = { primary: Boolean };

export const StyledHeader = styled("h1", hdrProps)`
  font-size: 1.5em;
  text-align: start;
  color: ${(props) => (props.primary ? "white" : "red")};
  background-color: ${(props) => (props.primary ? "green" : "yellow")};
`;

在这里，我们已经为我们的StyledHeader 定义了props。styled函数接收带有props的HTML元素作为参数，之后我们可以根据该prop的值来指定我们的CSS的行为。

让我们运行这个项目，不要给我们先前创建的头像提供任何道具，在浏览器中看到以下输出。

这正是我们所指定的工作。现在，让我们为我们的StyledHeader ，提供一个道具primary ，并检查样式是否被正确应用。

<template>
  <div class="hello">
  <StyledHeader primary>{{ msg }}</StyledHeader>
  <StyledInput placeholder="Password" type="text"/>  
  </div>
</template>

<script>
import {StyledInput} from "../styled-components/Input"
import {StyledHeader} from "../styled-components/Header"

export default {
  name: 'HelloWorld',
  components:{
    StyledInput,StyledHeader
  },
     props: {
    msg: String
  }

}
</script>

正如我们所看到的，StyledHeader 正在接受primary 作为一个道具。保存更改后，我们的项目呈现出以下输出。

StyledHeader Accepting The Primary Output In The Browser

通过这个，我们已经成功地根据我们的道具改变了样式，让我们了解了这个方法背后的基本概念。带有道具的样式可以通过按钮事件、表单提交等来改变。我们现在可以利用styled-components的动态样式的全部力量了。

将相同的样式应用于多个组件

样式化组件还提供了使组件遵循相同样式的能力。这为应用程序创造了一个一致的风格，并消除了大量重复的代码。

通过简单地在Header.js ，我们可以应用下面这行代码，为h2 ，使用相同的样式。

export const StyledHeader2
= StyledHeader.withComponent("h2");

在HelloWorld.vue 文件中使用这个组件后，我们将得到以下输出。

Applying The Same Styles To H2

动态地改变渲染组件的类型

有时，组件必须根据特定的场景而改变，但保留相同的样式。对于这种情况，风格化组件可以使用一个道具来改变被渲染的组件。

如果我们应用as 这个道具来改变StyledHeader ，我们就可以把它变成一个按钮。

<template>
  <div class="hello">
  <StyledHeader as=button>{{ msg }}</StyledHeader>
  <StyledInput placeholder="Password" type="text"/>  
  </div>
</template>

浏览器就会给出以下输出。

Change The StyledHeader Button

检查一下role ，我们可以清楚地看到它是一个按钮。

The Role is a Button

扩展样式

如果必须在不重写的情况下改变组件的样式，我们可以重写或添加新的样式给它。

通过创建一个名为NewHeader.js 的新组件，我们可以覆盖之前创建的Header.js 中的color 属性。

然后，让我们在NewHeader.js 中添加以下代码。

import { StyledHeader } from "./Header";
export const NewHeader = StyledHeader.extend`
  color: purple;
  border-color: purple;
`;

现在让我们渲染并在我们的HelloWorld.vue 文件中使用它。

<template>
  <div class="hello">
  <StyledHeader >{{ msg }}</StyledHeader>
  <NewHeader >{{ msg }}</NewHeader>
  <StyledInput placeholder="Password" type="text"/>  
  </div>
</template>

<script>
import {StyledInput} from "../styled-components/Input"
import {NewHeader} from "../styled-components/NewHeader"

import {StyledHeader} from "../styled-components/Header"

export default {
  name: 'HelloWorld',
  components:{
    StyledInput,StyledHeader,NewHeader
  },
     props: {
    msg: String
  }

}
</script>

保存更改后，我们得到以下输出。

Override The Color Attribute

正如我们所看到的，我们已经覆盖了Header.js 的颜色，并在我们新创建的NewHeader.js 中使用其样式。

总结

Styled-components是一个强大的库，它解决了我们在使用普通CSS时遇到的大部分痛点。虽然最初的学习曲线可能很陡峭，但其好处是值得的。

The post Theming Vue.js with styled-componentsappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝