Я использую Next.js (React) с Bootstrap и в стиле JSX.Я сталкиваюсь с проблемой, когда пользовательский класс в Bootstrap для модального стиля только с CSS, если глобальный CSS.Я объявляю пользовательский класс, используя свойство dialogClassName в Модале.Это мой функциональный компонент (я использую Typescript):
const Form: React.FunctionComponent<props> = (props: props) => {
const [FormVisibility, FormDispatch] = useContext(FormContext);
return (
<Modal
show={props.isVisible}
onHide={() => {FormDispatch({ type: ActionTypes.CloseForm }) }}
backdrop="static"
dialogClassName="custom-modal"
>
<Modal.Header closeButton >
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => {FormDispatch({ type: ActionTypes.CloseForm }) }}>
Close
</Button>
</Modal.Footer>
<style jsx global>{`
.custom-modal {
color: blue;
height: 75vh;
width: 75vw;
max-width: none !important;
}
`}
</style>
</Modal>
);
}
Это прекрасно работает.Но если бы я изменил <style jsx global> на <style jsx>, тогда стили не будут применены.Я здесь что-то делаю не так или есть лучший способ сделать это?Мне кажется странным, что global необходим, хотя компонент имеет класс, объявленный локально.
Спасибо!