fixed-data-table-2行悬停背景色设置失效求助

Hey there, I’ve dealt with this exact frustration with fixed-data-table-2 before—those cell and container styles love to override row-level hover states! Let’s walk through how to fix this step by step.

Why the Issue Happens #

The component’s default cell styles (fixedDataTableCellLayout_cell) often have higher specificity than custom row hover styles, or your own cell components (like your FilteredCell) might have hardcoded background colors that block the row’s hover effect.

Step 1: Boost Your Row Hover Style Specificity #

Instead of relying on generic selectors, use a more specific combination to ensure your hover style takes precedence. In your styles.css:

/* Target the row hover with higher specificity */
.table-container .fixedDataTableRowLayout_row:hover {
  background-color: #f0f8ff; /* Replace with your desired hover color */
}

Make sure you add the table-container class to your table’s wrapper component:

import s from './styles.css';

// ...

<FixedDataTable
  containerClassName={s.tableContainer}
  // ... other props
>
  <Column
    cell={({rowIndex, ...props}) => <FilteredCell {...props} />}
    // ... other column props
  />
</FixedDataTable>

Step 2: Force Cells to Inherit Row Background on Hover #

Even if your row hover style is specific, cells might still override it with their own background colors. Add this to your CSS to make cells inherit the row’s hover background:

/* Make cells inherit the row's hover background */
.table-container .fixedDataTableRowLayout_row:hover .fixedDataTableCellLayout_cell {
  background-color: inherit; /* Try without !important first—use only if necessary */
}

Step 3: Handle Custom Cell Components (Like Your FilteredCell) #

If your FilteredCell has its own background styles, you’ll need to target those too. Let’s say your cell uses the filtered-cell class:

/* Ensure custom cells also inherit the row hover background */
.table-container .fixedDataTableRowLayout_row:hover .filtered-cell {
  background-color: inherit;
}

Quick Check #

Double-check your FilteredCell component to make sure it doesn’t have inline styles setting backgroundColor—those will override CSS rules. If it does, conditionally set the background only when the row isn’t hovered, or switch to using a class instead.

Example Full CSS #

.table-container {
  /* Your existing container styles */
}

.table-container .fixedDataTableRowLayout_row:hover {
  background-color: #f5f5f5;
}

.table-container .fixedDataTableRowLayout_row:hover .fixedDataTableCellLayout_cell,
.table-container .fixedDataTableRowLayout_row:hover .filtered-cell {
  background-color: inherit;
}

This should ensure your row hover background shines through without being blocked by cell or container styles.

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