自定义样式

插件预留了 类选择器 您可以通过覆盖 CSS 的方法修改默认的插件样式，具体的类选择器可以在浏览器开发者工具中查看。

在【使用插件代码】中，我们已经生成代码并创建了插件，接下来我们在这个基础上进行自定义样式。

在上一步生成的代码中加入

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 此处插入自定义样式入口↓↓↓ -->
<link rel="stylesheet" href="./main.css">
</head>
<body>
<!-- 将生成的代码复制到此处↓↓↓ -->
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

在相同目录创建 main.css 文件，复制下面的代码并保存。

注意： 因为插件的 css 文件总是插入在 head 的最后，所以此处需要提高 css 选择器的特异性来确保可以覆盖默认的样式。可以在所有类选择器前加上 id 选择器 #tp-weather-widget ，或者重复键入类选择器来提高选择器的特异性。
```
#tp-weather-widget .sw-container {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  color: #000;
}
```
1
2
3
4
或：
```
.sw-container.sw-container {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  color: #000;
}
```
1
2
3
4
刷新 http://localhost:3000 可以看到插件的字体和字体颜色已经发生了改变。

# 自定义样式

自定义样式