Utilizing the JsonForms React Component to dynamically generate an HTML form in my web application. The framework I am using handles all view rendering on the server side. To integrate this component, I compiled a small react component by running npm run build which generated a main.js. I then included it in my app as follows:
<html>
<head>
...
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Although everything functions correctly, I noticed that the CSS styling of other elements on the page (outside of the component) has been altered when viewing pages containing the React component. Upon inspecting the computed styles in Chrome, I discovered that there is a <style> tag overriding the font-family applied to the body:
It appears that after page load, the <head> section includes style tags referencing the "emotion" library which are not present in the original server-sent page source:
I suspect that the javascript for my React component injected additional CSS styles into my page. Removing the <style> tag reverts the changes, such as the altered font-family.
How can I pinpoint where the .css modifications made by emotion are specified? Is there a method to configure or namespace a component styled with emotion to prevent unintended styling impacts on other page elements?
In essence, the JsonForms component I am integrating into my page mirrors the "seed" app provided by the JsonForms library:
import { Fragment, useState, useMemo } from 'react';
import { JsonForms } from '@jsonforms/react';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import logo from './logo.svg';
import './App.css';
import schema from './schema.json';
import uischema from './uischema.json';
import {
materialCells,
materialRenderers,
} from '@jsonforms/material-renderers';
import RatingControl from './RatingControl';
import ratingControlTester from './ratingControlTester';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles({
container: {
padding: '1em',
width: '100%',
},
title: {
textAlign: 'center',
padding: '0.25em',
},
dataContent: {
display: 'flex',
justifyContent: 'center',
borderRadius: '0.25em',
backgroundColor: '#cecece',
marginBottom: '1rem',
},
resetButton: {
margin: 'auto !important',
display: 'block !important',
},
demoform: {
margin: 'auto',
padding: '1rem',
},
});
const initialData = {
name: 'Send email to Adrian',
description: 'Confirm if you have passed the subject\nHereby ...',
done: true,
recurrence: 'Daily',
rating: 3,
};
const renderers = [
...materialRenderers,
//register custom renderers
{ tester: ratingControlTester, renderer: RatingControl },
];
const App = () => {
const classes = useStyles();
const [data, setData] = useState<any>(initialData);
const stringifiedData = useMemo(() => JSON.stringify(data, null, 2), [data]);
const clearData = () => {
setData({});
};
return (
<Fragment>
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<h1 className='App-title'>Welcome to JSON Forms with React</h1>
<p className='App-intro'>More Forms. Less Code.</p>
</header>
</div>
<Grid
container
justifyContent={'center'}
spacing={1}
className={classes.container}
>
<Grid item sm={6}>
<Typography variant={'h4'} className={classes.title}>
Bound data
</Typography>
<div className={classes.dataContent}>
<pre id='boundData'>{stringifiedData}</pre>
</div>
<Button
className={classes.resetButton}
onClick={clearData}
color='primary'
variant='contained'
>
Clear data
</Button>
</Grid>
<Grid item sm={6}>
<Typography variant={'h4'} className={classes.title}>
Rendered form
</Typography>
<div className={classes.demoform}>
<JsonForms
schema={schema}
uischema={uischema}
data={data}
renderers={renderers}
cells={materialCells}
onChange={({ errors, data }) => setData(data)}
/>
</div>
</Grid>
</Grid>
</Fragment>
);
};
export default App;