Polymer中google-chart表格CSS样式失效，需设置分页样式求助

Hey there! Let's work through why your CSS styles aren't applying to your Google Charts table, plus how to style the pagination controls. Here's what you need to check and adjust:

1. Fix Basic CSS Style Application Issues #

First, your class mapping looks correct, but there are a couple common pitfalls that might be blocking your styles:

a. Use Higher-Specificity CSS Selectors #

Google Charts injects its own default styles, which can override yours if your selectors aren't specific enough. Instead of just targeting .cssHeaderRow, add a parent selector tied to your chart element (since you're using this.$.chart_class, that's likely the element's ID):

#chart_class .cssHeaderRow {
  background-color: #2d3748;
  color: white;
  font-weight: 600;
}

#chart_class .cssTableRow {
  background-color: #f7fafc;
}

#chart_class .cssOddTableRow {
  background-color: #edf2f7;
}

/* Repeat this pattern for all your mapped classes */

If you're still having trouble, you can use !important as a temporary test (though it's better to fix specificity long-term):

.cssHeaderCell {
  border-bottom: 2px solid #2b6cb0 !important;
}

b. Verify Your CSS is Loaded Correctly #

Double-check that your stylesheet is included in your project and loads before the chart renders. If you're using a Polymer element, make sure your styles are defined in the <style> tag inside the element template.

c. Clean Up Duplicate Options #

You have showRowNumber: true twice in your options object—this doesn't break anything, but it's better to remove the duplicate to keep your code clean:

var options = {
  page: 'enable', 
  pageSize:20, 
  height:'100%', 
  sort:'enable', 
  showRowNumber: true, 
  width: '100%', 
  alternatingRowStyle:true, 
  allowHtml: true, 
  cssClassNames: cssClassNames
}

2. Ensure Proper Timing for Options & Redraw #

Since you're using a Polymer element (evidenced by this.$.chart_class), make sure you're setting options and calling redraw() after the element is ready and data is loaded. For example, put this code in the ready() or attached() lifecycle hook, or in a callback after your data is fetched:

ready() {
  super.ready();
  // Wait a tick to ensure the chart element is fully initialized
  setTimeout(() => {
    this.$.chart_class.set('options', options);
    this.$.chart_class.redraw();
  }, 0);
}

3. Style the Pagination Controls #

Google Charts uses specific built-in classes for pagination elements—you can target these directly in your CSS:

/* Container for pagination controls */
.google-visualization-table-page {
  margin-top: 12px;
  text-align: center;
  gap: 4px;
  display: flex;
  justify-content: center;
}

/* Pagination buttons */
.google-visualization-table-page-button {
  background-color: #3182ce;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.google-visualization-table-page-button:hover {
  background-color: #2b6cb0;
}

/* Disabled pagination buttons */
.google-visualization-table-page-button-disabled {
  background-color: #a0aec0;
  cursor: not-allowed;
}

/* Current page number */
.google-visualization-table-page-number-current {
  font-weight: bold;
  padding: 0 6px;
  color: #2d3748;
}

Give these adjustments a try—your styles should start applying, and the pagination controls will match your custom design!

内容的提问来源于stack exchange，提问作者Max