React 应用程序 - 避免样式被其他 CSS 覆盖

Question

我想提供一些在用户网站上显示表单的复制和粘贴代码。

所有元素都在“#myContainer”中。

但是，元素样式被用户页面上的其他 CSS 覆盖。

例如，我有一个类为button.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary.jss145 的按钮。我知道我也可以将其定位为 #myContainer 的后代。

但是第三方网站可以通过数百种可能的方式干扰 CSS（例如，字段的背景颜色、按钮的悬停状态）——我的 CSS 中没有一个特别定义。

如果不具体定义每一个可能性，有没有办法可以防止 #myContainer 中的任何内容被外部 CSS 干扰？

非常感谢

Answer 1

我正在使用 css-modules 结合 scss 来限制 css 出血。

index.scss

.mycontainer {
   :global {
       .button.MuiButtonBase-root {
           background: #CCCCCC;
       }
    }
}

MyComponent.js

import styles from './index.scss';

const MyComponent = props => {
  return (
      <div className={styles.mycontainer}>
         <button className="button MuiButtonBase-root">Button</button>
      </div>
  );
};

这将产生一个唯一的父类名称，并且将由 css-loader 在 css 中生成相同的名称。

 <div class="MyComponent__mycontainer-33ds2d3">
     <button className="button MuiButtonBase-root">Button</button>
 </div>

我不知道输出格式是什么，但会类似于MyComponent__mycontainer-33ds2d3，这将确保这些样式不会溢出，反之亦然。

用cssModules: true添加css-loader

const autoPrefixer = require('autoprefixer');
const postcssNesting = require('postcss-nested');


{
    test: /src\/(.*)\.(scss)$/,
    use: [
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
        options: {
          modules: true,
          localIdentName: '[name]__[local]--[hash:base64:5]',
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: () => [autoPrefixer, postcssNesting(/* pluginOptions */)],
        },
      },
      {
        loader: 'sass-loader',
      },
    ],
  },