如何解决全局样式如何在特定组件中失效?
GlobalStyle.jsx
const GlobalStyle = createGlobalStyle`
* {
box-sizing: border-box;
${reset}
}
`
_app.jsx
它已添加到app.jsx(顶部组件)
...
<GlobalStyle />
<ThemeProvider theme={theme}>
<AppHeader />
<Component {...pageProps} />
...
QuillEditor.jsx
我不想在此组件中使用全局样式
import dynamic from 'next/dynamic';
import React,{ useState,useRef,useEffect } from 'react';
import modules from '../quill/modules';
const ReactQuill = dynamic(() => import('react-quill'),{
ssr: false,loading: () => <div>editor loading ...</div>,});
const QuillWrapper = () => {
const [value,setValue] = useState('');
const quillRef = useRef();
useEffect(() => {
console.log(quillRef.current);
},[quillRef]);
console.log(value);
return (
<ReactQuill ref={quillRef} theme="snow" value={value} onChange={setValue} modules={modules} />
);
};
export default QuillWrapper;
在这种情况下,我想对特定组件执行无效全局样式。
(例如,所见即所得的编辑器组件等)
我该怎么做?请帮助我!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。