表单元素的样式可以单独放在一个样式表里，在项目的下面新建一个样式表，放在 app/styles 的下面，名字是 form.css ， 按钮的样式也可以单独放在一个样式表里，同样在这个目录的下面，新建一个 button.css，等会儿可以把按钮相关的样式放在这个样式表里。

打开应用的根组件，就是这个 app 组件，在组件里面导入使用刚才创建的这两个样式表，@import 位置是当前目录 styles 下面的 form.css ，还有一个是当前目录 styles 下面的 button.css。

form.css

然后先在 form.css 样式表里给表单还有表单元素添加一些样式。 调整一下编辑器的窗口宽度，还有浏览器的窗口宽度。这样修改样式的时候，保存样式文件以后可以马上看到元素样式的变化。

先设计一下 form 这个类的样式，用 margin-bottom 添加 32 个像素的下边的外边距。

再设计一下 .form 下面的 .header 也就是表单里的大标题，用 margin-bottom 添加 40 个像素的下边的外边距。

表单元素都会使用一个带 field 类的 div 元素包装一下，这里可以把 font-size 设置成 16 像素。 再用 color 把文字颜色设置成 --primary-text-color 这个变量的值。 下面再用 margin-bottom 添加 32 像素的下边的外边距。

input

在表单的文本框元素的上面可以添加两个类，修改一下登录组件这里用的这个文本框元素，添加一个 class 属性，里面添加两个类，input 还有 text 。同样在这个密码元素的上面也加上 input 还有 text 这两个类。 回到 form 样式表。

再设计一下 .field 下面的 .input 这个类的样式， 用 color 把文字颜色设置成 primary-text-color 。背景颜色可以使用之前我们定义的 --primary-background 这个变量的值。

box-sizing 设置成 border-box，再用 padding 添加个内边距，上下是 8 像素，左右是 0 。 再用 margin-bottom 在元素的下边添加 8 个像素的外边距。

width 可以设置成 100% ，border 设置成 none 去掉默认的边框，再把 outline 也设置成 none。

下面可以设计一下 .field 下面的 .input.text 的样式，用 border-bottom 在元素下边添加 1 个像素的实线边框，边框的颜色使用之前我们定义的 --line-color 。

再设计一下 .field 下面的 .input.text:focus ，也就是焦点状态下的文本框，用 border-bottom-color 修改一下边框颜色，设置成 --highlight-line-color 。

button.css

按钮的样式可以放在这个 button.css 样式表里。 按钮元素上会有一个 .button 类，设计一下这个类的样式， font-size 字号设置成 16 像素， color 可以是白色， padding，上下是 8 像素，左右是 24 像素。 background 背景颜色的值可以使用一个变量。

打开项目里的 theme.css 这个样式表，先在 page.light 里面定义两个变量，一个是 --primary-button-background，表示按钮的背景颜色，在亮色主题下面，按钮背景颜色是黑色。

下面再添加一个 --outline-button-color， 这个变量的值也是黑色。 复制一下添加的这两个变量。 把它们放在 .page.dark 里面，在暗色主题里面，主要按钮的背景颜色是 #555555 ，--outline-button-color 也设置成 #555555 。

然后回到 button 样式表，用一下我们定义的 --primary-button-background 这个变量的值。 border 是两个像素的实线，颜色是 --outline-button-color 。

大号按钮上会除了 button 这个类以外，还有一个 large 这个类，设计一下大号按钮的样式，可以把内边距设置的大一些。上下是 14 像素，左右是 40 像素。

预览

最后再到浏览器上预览一下这个用户登录表单，文本框进入焦点状态的时候会改变它的边框颜色，再切换一下应用的主题，观察一下样式的变化。