在React+TS的项目中scss问题

Question

问题描述

在我的React+ts+ant的项目中遇到不知如和将样式作用域深入的问题。代码如下：
][2]

问题出现的环境背景及自己尝试过哪些方法

另外就是遇到一个index.scss.d.ts会自动生成 导致报错的问题
尝试 import './index.scss' 引入样式文件 在tsx中直接以字符串作为类名的形式，发现不起作用

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
index.scss

.container {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  & > .ant-form-item {
    margin-bottom: 30px;
    & > .ant-form-item-control-wrapper {
      width: 280px;
    }
  }

  .btnBox {
    margin-left: 12%;
  }

  .btn2 {
    margin-left: 20px;
  }
}

自动生成的index.scss.d.ts

// This file is automatically generated.
// Please do not change this file!
export const ant-form-item: string;
export const ant-form-item-control-wrapper: string;
export const btn2: string;
export const btnBox: string;
export const container: string;

index.tsx

import * as React from 'react'
import { inject, observer } from 'mobx-react'
import { observable, action, computed } from 'mobx'
import { Form, Input, Select, Radio, Button } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import { statusOption } from '../user.config'
import { ComponentExt } from '@utils/reactExt'
import * as styles from './index.scss'

const FormItem = Form.Item

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
        lg: { span: 3 }
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
        lg: { span: 5 }
    }
}

interface IProps {
    user?: IUserStore.IUser
    createUser?: (user: IUserStore.IUser) => Promise<any>
    modifyUser?: (user: IUserStore.IUser) => Promise<any>
    getUsers?: () => Promise<any>
    changePageIndex?: (pageIndex: number) => void
}

@inject(
    (store: IStore): IProps => {
        const { user, createUser, modifyUser, getUsers, changePageIndex } = store.userStore
        return { user, createUser, modifyUser, getUsers, changePageIndex }
    }
)
@observer
class UserModal extends ComponentExt<IProps & FormComponentProps> {
    @observable
    private loading: boolean = false

    @computed
    get typeIsAdd() {
        return this.props.user === undefined
    }

    @computed
    get title() {
        return this.typeIsAdd ? 'Add User' : 'Modify User'
    }

    @action
    toggleLoading = () => {
        this.loading = !this.loading
    }

    submit = (e?: React.FormEvent<any>): void => {
        if (e) {
            e.preventDefault()
        }
        const { user, createUser, modifyUser, getUsers, changePageIndex, form } = this.props
        form.validateFields(
            async (err, values): Promise<any> => {
                if (!err) {
                    this.toggleLoading()
                    try {
                        if (this.typeIsAdd) {
                            await createUser(values)
                            changePageIndex(1)
                        } else {
                            await modifyUser({ ...values, _id: user.id })
                        }
                        getUsers()
                    } catch (err) { }
                    this.toggleLoading()
                }
            }
        )
    }

    render() {
        const { user, form } = this.props
        const { getFieldDecorator } = form
        const {
            role = '',
            user_name = '',
            owner = '',
            status = 1
        } = user || {}
        return (
            <Form className={styles.container} onSubmit={this.submit}>
                <FormItem {...formItemLayout} label="User Name">
                    {getFieldDecorator('user_name', {
                        initialValue: user_name,
                        rules: [
                            {
                                required: true
                            }
                        ]
                    })(<Input />)}
                </FormItem>
                {this.typeIsAdd && (
                    <FormItem {...formItemLayout} label="password">
                        {getFieldDecorator('password', {
                            rules: [
                                {
                                    required: true
                                }
                            ]
                        })(<Input />)}
                    </FormItem>
                )}
                <FormItem {...formItemLayout} label="Owner">
                    {getFieldDecorator('owner', {
                        initialValue: owner,
                        rules: [
                            {
                                required: true
                            }
                        ]
                    })(<Input />)}
                </FormItem>

                <FormItem {...formItemLayout} label="Role Name">
                    {getFieldDecorator('role', {
                        initialValue: role,
                        rules: [
                            {
                                required: true
                            }
                        ]
                    })(
                        <Select>
                            {/* {userCategory.map(c => (
                                <Select.Option key={c} value={c}>
                                    {c}
                                </Select.Option>
                            ))} */}
                        </Select>
                    )}
                </FormItem>
                <FormItem {...formItemLayout} label="Status">
                    {getFieldDecorator('status', {
                        initialValue: status,
                        rules: [
                            {
                                required: true
                            }
                        ]
                    })(
                        <Radio.Group>
                            {statusOption.map(c => (
                                <Radio key={c.key} value={c.value}>
                                    {c.key}
                                </Radio>
                            ))}
                        </Radio.Group>
                    )}
                </FormItem>
                <FormItem className={styles.btnBox}>
                    <Button type="primary" htmlType="submit">Submit</Button>
                    <Button className={styles.btn2} htmlType="submit">Cancel</Button>
                </FormItem>
            </Form>
        )
    }
}

export default Form.create<IProps>()(UserModal)

你期待的结果是什么？实际看到的错误信息又是什么？

期望该scss中的样式可以覆盖ant中默认的样式。

Answer 1

我理解：因为这个ts中使用模块化的css是 会吧 style.xxx 编译成 一个hash的东西。然后就出现我遇到的问题了。

加上:global 可以使其不编译成类似hash的类名

Answer 2

加上一个!global试试？scss没用过，这个问题也没遇到过，但我用less的时候遇到过不能覆盖样式的问题，用的:global解决的。你可以试下

 & > .ant-form-item {
    margin-bottom: 30px !global;
    & > .ant-form-item-control-wrapper {
      width: 280px !global;
    }
  }