Is there a way for props.styles to remove baseStyles from a styled component ?

[tonyhallett]

I have the same use case as #18611. I want to remove the hover for a DetailsList functioning as a table.

The solution provided in the codesandbox works.

const rowStyles: IDetailsRowProps['styles'] = (props) => {
  // For some reason DetailsRow.styles.ts uses palette rather than semanticColors.
  // This is not ideal, but mirroing it here for consistency.
  const { palette } = props.theme!;
  return {
    root: {
      '&:hover': {
        background: palette.white,
        color: palette.neutralSecondary,
        [`.${DetailsRowGlobalClassNames.isRowHeader}`]: {
          color: palette.neutralPrimary
        }
      }
    }
  };
};
const onRenderRow: IDetailsListProps['onRenderRow'] = (props, defaultRender) => {
  return defaultRender!({ ...props!, styles: rowStyles });
};

I was hoping that this was possible.

root: {
      '&:hover': null
}

I know I can create my own version of DetailsRow that provided own baseStyles that corrected getDetailsRowStyles.

export const DetailsRow: React.FunctionComponent<IDetailsRowBaseProps> = styled<
  IDetailsRowBaseProps,
  IDetailsRowStyleProps,
  IDetailsRowStyles
>(DetailsRowBase, getDetailsRowStyles, undefined, {
  scope: 'DetailsRow',
});

[micahgodbolt]

The above solution is the best solution. MergeStyles doesn't support a null style.