Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

After GridPDFExport some <style> elements are re-applied to the <head> #1031

Open
simonssspirit opened this issue Aug 6, 2021 · 5 comments
Open

After GridPDFExport some <style> elements are re-applied to the <head> #1031

simonssspirit opened this issue Aug 6, 2021 · 5 comments
Labels
Bug Item which indicates that something is not working C: GridLayout pkg:PdfExport SEV: Medium

Comments

@simonssspirit
Copy link
Contributor

After GridPDFExport some <style> elements are re-applied to the .

These elements are coming from JSS and MUI. Still, their re-adding is triggered by the GridPDFExport.

More details and an example can be seen in ticket: 1516967
@simonssspirit simonssspirit added Bug Item which indicates that something is not working pkg:PdfExport labels Aug 6, 2021
@simonssspirit
Copy link
Contributor Author

reported again in 1541784

@kenny-t-philips
Copy link

kenny-t-philips commented Nov 9, 2021 •
edited
Loading

Can we please get some eyes on this? Or if there is a work-around? Or even where in the code this occurs so we can patch it ourselves? I presume it is in the KendoDrawingAdapter, but I'm not positive yet.

@simonssspirit
Copy link
Contributor Author

@kenny-t-philips I escalated this to the team. The case is very complex this is why it could take long to investigate and fix it.

@kenny-t-philips
Copy link

Thank you. I think we found a way to work around it for our use case.

@Muhammedfazee
Copy link

In our scenario the React component structure was as follow.

const ReportGrid = () => {
  const grid = (
  <Grid>
    <GridToolbar>
      <Button/> // material ui button
    </GridToolbar>
  </Grid>
  )

  return (
    <>
    {grid}
    <GridPDFExport>
      {grid}
    </GridPDFExport>
    </>
  )
}

Fix we did:

const ReportGrid = () => {
  const grid = (
  <Grid>
  </Grid>
  )

  return (
    <>
    <Button/> // material ui button
    {grid}
    <GridPDFExport>
      {grid}
    </GridPDFExport>
    </>
  )
}

We removed the material ui button from <GridToolbar> and placed in outside the <Grid> and it solved the issue.

Analysis:

We have defined custom material ui theme for our application using createTheme from '@material-ui/core/styles'. However when we are using material ui component inside <Grid> and passing the grid to <GridPDFExport>, internally <GridPDFExport> is loading the material ui ( default theme ) <style> tags for the passed MUI components. These <style> tags are overriding the styles, hence the issue. It is not considering the custom theme we have created.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Item which indicates that something is not working C: GridLayout pkg:PdfExport SEV: Medium
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@elena-gancheva @Muhammedfazee @simonssspirit @kdikov82 @gyankov @kenny-t-philips