如何设置vaadin-grid标题的样式？

Question

我正在尝试将样式应用于header vaadin网格组件，但没有结果，这可能是什么问题？

我在页面中有组件

<script-loader-grid></script-loader-grid> 

在它的组件中，我尝试实现样式。

  <style>
            ${styles}
          :host {
             height: 150px;
          }
        [part="header-cell"] {
             background: red;
          }
        </style>
        

           <vaadin-grid id="test" .items ="${test_data}">
              <vaadin-grid-column path="company" header="Company" ы></vaadin-grid-column>
              <vaadin-grid-column path="script" header="Script"></vaadin-grid-column>
              <vaadin-grid-column path="stage" header="Stage"></vaadin-grid-column>
              <vaadin-grid-column path="atributes" header="Atributes"></vaadin-grid-column>
            </vaadin-grid>
        
    `

Answer 1

我用这种方式解决了我的问题，只是使用registerStyles

import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'
import {css} from '@vaadin/vaadin-themable-mixin/register-styles'


class scriptLoaderGrid extends connect(store)(LitElement) {
    static get properties() {
        return {
            opened: {type: Boolean},
        }
    }

    constructor() {
        super()
        registerStyles('vaadin-grid', css`
      :host [part~="header-cell"] ::slotted(vaadin-grid-cell-content), [part~="footer-cell"] ::slotted(vaadin-grid-cell-content), [part~="reorder-ghost"] {
        background:red
      }
    `)
    }

......
 <vaadin-grid .items ="${test_data}" theme="special-field">
              <vaadin-grid-column path="company" header="Company"></vaadin-grid-column>
      .....
            </vaadin-grid>