react样式污染问题

在vue中，我们可以通过在style标签中声明scoped属性来达到样式隔离的目的。
在react中我们可以这样做来避免样式污染。
第一步：将scss文件这样声明：xxx.module.scss
第二步：将

import '../xxx.module.scss'

改成

import style from  '../xxx.module.scss'

第三步

<div className="fathercontainer"></div>

改为

<div className={styles.fathercontainer}></div>

对于这种的

.formcon {
    display: flex;
    flex-wrap: wrap;
    div:nth-child(4) {
        min-width: 300px;
        padding-left: 40px;
    }
    div:nth-child(6) {
        min-width: 300px;
    }
}

只需改成如下即可

<Form
                  name="basicsearchsource"
                  className={styles.formcon}
                  labelCol={{ span: 8 }}
                  // wrapperCol={{ span: 16 }}
                  // style={{ minWidth: 600 }}
                  // initialValues={{ remember: true }}
                  autoComplete="off"
                  form={form}
                >
</form>