Vaadin 上传按钮，CSS 来改变它的颜色（与按钮相同的样式）？

Question

Vaadin 7.6.2

什么是 CSS 可以让我将上传按钮的颜色更改为以下颜色之一：danger、primary 或 友好，以便我可以像使用按钮一样使用setStyleName()？

参考： https://vaadin.com/docs/-/part/framework/components/components-button.html

本文档不讨论错误或修复： https://vaadin.com/docs/-/part/framework/components/components-upload.html

但确实说：

上传按钮与常规按钮组件具有相同的结构和样式。

所以，我猜这个“按钮”未包含的 SCSS 或 CSS 要么是遗漏、疏忽，要么是错误。

Answer 1

通过在源代码中找到“危险”、“主要”和“友好”并简单地将它们复制出来，将它们粘贴到 mytheme.scss 然后更改样式名称来解决它，如 @AndreSchild 中所述以下答案：

Vaadin Upload Component Upload Button, changing it's Style?

这是更新后的 CSS（粘贴到 mytheme.scss）并使用 setStyleName，就像您对常规按钮组件一样：

    .v-upload-primary .v-button {
            height: 37px;
            padding: 0 16px;
            color: #ecf2f8;
            font-weight: 400;       
            border-radius: 4px;
            border: 1px solid #1362b1;
            border-top-color: #156ab3;
            border-bottom-color: #1156a8;
            background-color: #197de1;
            background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
            background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
            -webkit-box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
            padding: 0 19px;
            font-weight: bold;
            min-width: 81px;
     }

    .v-upload-primary .v-button:after {
            border: inherit;
            top: -1px;
            right: -1px;
            bottom: -1px;
            left: -1px;
    }

    .v-upload-primary .v-button:hover:after {
            background-color: rgba(90, 163, 237, 0.1);
    }

    .v-upload-primary .v-button:focus:after {
            border: inherit;
            -webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
            box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
    }

    .v-upload-primary .v-button:active:after {
            background-color: rgba(2, 62, 122, 0.2);
    }

    .v-ie8 .v-upload-primary .v-button {
            min-width: 43px;
    }

    .v-upload-friendly .v-button  {
            height: 37px;
            padding: 0 16px;
            color: #eaf4e9;
            font-weight: 400;
            border-radius: 4px;
            border: 1px solid #227719;
            border-top-color: #257d1a;
            border-bottom-color: #1e6b15;
            background-color: #2c9720;
            background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%);
            background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%);
            -webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
    }

    .v-upload-friendly .v-button:after {
            border: inherit;
            top: -1px;
            right: -1px;
            bottom: -1px;
            left: -1px;
    }

    .v-upload-friendly .v-button:hover:after {
            background-color: rgba(65, 211, 48, 0.1);
    }

    .v-upload-friendly .v-button:focus:after {
            border: inherit;
            -webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
            box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
    }

    .v-upload-friendly .v-button:active:after {
            background-color: rgba(14, 86, 6, 0.2);
    }

    .v-upload-danger .v-button {
            height: 37px;
            padding: 0 16px;
            color: #f9f0ef;
            font-weight: 400;
            border-radius: 4px;
            border: 1px solid #bb382e;
            border-top-color: #bc3c31;
            border-bottom-color: #b13028;
            background-color: #ed473b;
            background-image: -webkit-linear-gradient(top, #ee4c3f 2%, #e13e33 98%);
            background-image: linear-gradient(to bottom,#ee4c3f 2%, #e13e33 98%);
            -webkit-box-shadow: inset 0 1px 0 #ef786f, inset 0 -1px 0 #da3c31, 0 2px 3px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 #ef786f, inset 0 -1px 0 #da3c31, 0 2px 3px rgba(0, 0, 0, 0.05);
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
    }

    .v-upload-danger .v-button:after {
            border: inherit;
            top: -1px;
            right: -1px;
            bottom: -1px;
            left: -1px;
    }

    .v-upload-danger .v-button:hover:after {
            background-color: rgba(243, 137, 129, 0.1);
    }

    .v-upload-danger .v-button:focus:after {
            border: inherit;
            -webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
            box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
    }

    .v-upload-danger .v-button:active:after {
            background-color: rgba(146, 12, 2, 0.2);
    }

Answer 2

另一种解决方案是使用 css 隐藏组件内的上传按钮。然后在上传组件旁边的代码中添加一个标准 Vaadin 按钮。只需在按钮的点击侦听器中调用 upload.submit()。

现在可以轻松地将这些标准样式名称应用于该按钮。