Question 73726 in Reactjs Question posted in
The new location for the React Documentation can be found here.

mui typography overide table format – Reactjs

I have a site that imports markdown or mdx files and renders them.
I have formatted the normal markdown tables using

table: (props) => <Typography variant="table">{props.children}</Typography>

this works fine.

however, I have a component that wraps a markdown table in mdx.

<Wrapper>

| table head 1 | table head 2 |
| ------------ | ------------ |
| table data 1 | table data 2 | 

</Wrapper>

I need the table nested within this component to have an entirely different style to a normal table.

when I apply styles to that component, the table is a child and therefore seems to take the default styling.

is there any way of clearing the style of the table for all children?

I’ve tried using the sx prop on the component to pass in styles for the table. This adds the styles as expected, but I need to clear all the default styles first.

Tags:

2

Answers


  1. 0

    You can do that with css with
    1.adding a css class name to the table component
    Wrapper className=‘table-wrap’
    2. Have something similar to:

    .table-wrap * {
display: block;
}
    Login or Signup to reply.
  2. 0

    is there any way of clearing the style of the table for all children?

    Yes. Use <ScopedCssBaseline /> as described in the docs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search