Question

我创建了一个使用css模块的React组件。

我有一个徽标组件：

import * as React from 'react';

import * as styles from './Logo.module.scss';
import appLogo from "../../assets/logo.png";


interface ILogoProps {
  logo?: object,
  alt?: string,
  externalStyle?: Object
}

export const MyLogo = ({logo, alt, externalStyle} : ILogoProps ):
  React.ReactElement<ILogoProps > => {
  const defaultLogo = logo? logo : appLogo;
  const defaultAlt = alt? alt : 'MY Logo';

  return (
      <div className={[styles.logo, externalStyle].join(' ')} >
        <img src={defaultLogo} alt={defaultAlt}/>
      </div>
  );
};

export default MyLogo;

.logo{
  height: 40px;
  background-color: rgba(255,255,255,0.01);
}

我正在尝试通过传递外部样式来覆盖徽标的丰富背景颜色

.test{
  background-color: #721c24;
  height: 100px;
}

但是我从外部传入的css模块无法覆盖徽标组件的本地css。

注意

我已经阅读了多个Stackoverflow帖子，这是不可能的，因为不能覆盖Local Css模块。

通过在覆盖样式中使用重要元素，它可以工作，但是那种感觉对我来说是正确的。

除此之外，还有其他解决方案吗？

Answer 1

如果您的外部CSS规则更具体，那么它也将起作用。因此，例如，如果将父容器添加到规则中，然后再添加元素，则它将仅使用css元素规则来覆盖不太具体的规则。

.element { /* your styles */ }

.parentelement .element { /* will override element styles /* }

CSS模块无法覆盖其他CSS模块的样式

1 个答案: