防止情绪注入

Question

我正在使用 JsonForms React Component 在我的 Web 应用程序中动态生成 HTML 表单。我使用的框架在服务器端完成所有视图渲染，因此为了包含此组件，我使用

npm run build

编译了一个小型反应组件，生成

main.js

并将其包含在我的应用程序中，如下所示：

<html>
  <head>
    ...
    <script type="text/javascript" src="main.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

从功能上讲，一切都按预期工作，但是在包含 React 组件的页面上，其他页面元素（组件外部）的 CSS 样式已更改。当我检查 Chrome 中的计算样式时，我发现有一个

<style>

标签覆盖了应用于正文的字体系列：

我看到页面加载后，

<head>

部分包含提及“情感”库的样式标签，这些标签不存在于服务器发送的页面源中：

我假设我的 React 组件的 javascript 已将额外的 CSS 样式注入到我的页面中。如果我删除标签“”，诸如字体系列更改之类的样式将被恢复。

如何找出因情感而进行的 .css 更改的指定位置？有没有办法配置/命名一个带有情感样式的组件，以防止页面上其他元素的意外样式？

出于所有意图和目的，我添加到页面的 JsonForms 组件与 JsonForms 库提供的“seed”应用程序相同：

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;

Answer 1

在切掉种子应用程序的各个部分以确定哪一段代码导致样式标签注入后，我了解到不需要的样式来自于在 src/ 中使用

<CssBaseline />

（来自“@mui/material”）索引.tsx:

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

https://github.com/eclipsesource/jsonforms-react-seed/blob/7c57180ee581dda8d2336730655ccb5498eed8a2/src/index.tsx#L22

删除此标签会阻止材质样式应用到页面的其余部分。

防止情绪注入

问题描述投票：0回答：1

1个回答

最新问题

防止情绪注入

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1