如何在Emotion JS代码中避免使用CSS !important规则

问题描述 #

尝试为<a>标签设置hover颜色，但样式未生效，只有添加!important后才能正常应用。当前使用Emotion JS，将样式文件导出后在组件中导入，需要找到无需使用!important的解决方案。

现有代码：

样式文件（ErrorScreenStyles.js） #

import { css } from '@emotion/react';

const ErrorStyles = css({
  color: '#c34922',
  textDecorationColor: '#c34922',
  '&:hover': {
    color: '#c34922 !important',
    textDecorationColor: '#c34922 !important',
  },
});

export { ErrorStyles };

组件文件（ErrorScreen.js） #

/** @jsxImportSource @emotion/react */
import { ErrorStyles } from './ErrorScreenStyles';

const ErrorScreen = () => {
  return (
    <>
      <a href="https://www.google.com/" target="_blank" css={ErrorStyles}>
        Create an account.
      </a>
    </>
  )
}
export default ErrorScreen;

原因分析 #

样式未生效通常是因为原生<a>标签的默认hover样式，或者项目中的全局CSS样式优先级高于Emotion注入的样式，导致hover状态的样式被覆盖。

解决方案1：使用Emotion Styled组件替代css prop #

Styled组件生成的类具有更高的特异性，能有效避免被全局样式覆盖。

修改样式文件：

// ErrorScreenStyles.js
import styled from '@emotion/styled';

export const StyledErrorLink = styled.a`
  color: #c34922;
  text-decoration-color: #c34922;

  &:hover {
    color: #c34922;
    text-decoration-color: #c34922;
  }
`;

修改组件文件：

/** @jsxImportSource @emotion/react */
import { StyledErrorLink } from './ErrorScreenStyles';

const ErrorScreen = () => {
  return (
    <>
      <StyledErrorLink href="https://www.google.com/" target="_blank">
        Create an account.
      </StyledErrorLink>
    </>
  )
}
export default ErrorScreen;

解决方案2：提高选择器特异性 #

通过增加选择器的特异性，让Emotion的hover样式优先级高于全局样式。例如给父元素添加类名，结合该类名定义hover样式：

修改样式文件：

import { css } from '@emotion/react';

const ErrorStyles = css({
  color: '#c34922',
  textDecorationColor: '#c34922',
  // 结合父元素类名提高特异性
  '.error-screen &:hover': {
    color: '#c34922',
    textDecorationColor: '#c34922',
  },
});

export { ErrorStyles };

修改组件文件，添加父元素类名：

/** @jsxImportSource @emotion/react */
import { ErrorStyles } from './ErrorScreenStyles';

const ErrorScreen = () => {
  return (
    <div className="error-screen">
      <a href="https://www.google.com/" target="_blank" css={ErrorStyles}>
        Create an account.
      </a>
    </div>
  )
}
export default ErrorScreen;

解决方案3：排查并调整全局样式 #

检查项目中是否存在全局的<a>标签hover样式（比如在global.css或其他全局样式文件中），可以：

• 缩小全局样式的作用范围，避免影响到该组件的<a>标签
• 调整全局样式的加载顺序，确保Emotion样式在全局样式之后加载

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