Нажатие кнопки приводит к исчезновению стилей CSS - PullRequest
0 голосов
/ 09 мая 2019

В моем проекте React есть кнопка «Электронная почта», которая приводит к исчезновению всех моих стилей. У меня есть несколько стилей во внешне загруженных .css файлах, а некоторые закодированы в JSX.

(Это происходит только после build, а не при использовании run dev.)

Кто-нибудь испытывал это? Как мне начать отслеживать причину?

Это нормально для загрузки стилей извне, или я должен поместить их все в const theme = createMuiTheme

После копания глубже я нашел это:

head

JSS добавляет больше таблиц стилей MUI ПОСЛЕ моего CSS в head, хотя у меня есть JSS insertionPoint, определенный ДО. Но только ПОСЛЕ того, как я нажму кнопку электронной почты.

Соответствующие части рассматриваемого компонента:

export default class Person extends Component {
    constructor(props) {
        super(props);
        this.state = {
            expanded: false,
            mailStatus: "idle",
        };
    }

    sendMailStatic = () => { ...
        axios.post('/api/sendEmailStatic', {...
    }

    render() {
        return (
            <Card ...
                <CardHeader ...
                    action={
                        <>
                            <IconButton className='PersonEmailBtn'
                                onClick={() => { this.sendMailStatic() }}
                            >
                                {(() => {
                                    switch (this.state.mailStatus) {
                                        case 'sending':
                                            return <FAIcon className='EmailStatusIcon Sending' icon='sync-alt' spin />;
                                        case 'error':
                                            return <FAIcon className='EmailStatusIcon Error' icon='exclamation-circle' />;
                                        case 'sent':
                                            return <FAIcon className='EmailStatusIcon Sent' icon='check-circle' />;
                                        case 'idle':
                                            return <MailIcon className='EmailStatusIcon Idle' />;
                                        default:
                                            return null;
                                    }
                                })()}
                            </IconButton>
                        </>
                    }
...
                    }}
                />

                <Collapse ...
                </Collapse>
            </Card>
        )
    }
}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...