## TypographyStylesProvider  
Styles provider for html content  
Category: Typography  

### Basic usage

By default, Mantine does not include global typography styles. To apply consistent styling to your HTML content, wrap it in `TypographyStylesProvider`.  

```python
dmc.TypographyStylesProvider(
    html.H1("html components styled with a Mantine theme")
)
```

The styles applied to `TypographyStylesProvider` children can be found in the [Mantine GitHub repository](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/components/Typography/Typography.module.css).  

### Included Styles
`TypographyStylesProvider` provides default styling for:  
- Headings (`h1`-`h6`)  
- Paragraphs (`p`)  
- Lists (`ul`, `ol`)  
- Blockquotes (`blockquote`)  
- Tables (`table`)  
- Links (`a`)  
- Images (`img`)  
- Horizontal rules (`hr`)  
- Keyboard inputs (`kbd`)  
- Code blocks (`code`, `pre`)  

### Using with Dash html Components

You can use `TypographyStylesProvider` to apply Mantine's typography styles to Dash’s html components. Below is an example of styling a table:  

```python
from dash import  html
import dash_mantine_components as dmc
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

def generate_table(dataframe, max_rows=10):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ])

component = html.Div(
    [
        html.Div([
            html.H4("Example without TypographyStylesProvider"),
            generate_table(df),
        ], style={"marginBottom": 36}),

        dmc.TypographyStylesProvider([
            html.H4("Example with TypographyStylesProvider"),
            generate_table(df),
        ]),
    ]
)
```
### Using with dcc.Markdown

If you are rendering content from the [RichTextEditor](/components/richtexteditor) in `dcc.Markdown`, you can wrap it in `TypographyStylesProvider` to ensure it adopts Mantine’s typography styles.  

```python
from dash import  dcc
import dash_mantine_components as dmc


# Content from the RichTextEditor example.
content = """<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>"""

component = dmc.TypographyStylesProvider(
    dcc.Markdown(content, dangerously_allow_html=True, id="default"),
)
```