title: How to extend material-ui component style to another react component from differently library?
body: <p>For example:</p>
  <pre><code>import { CssBaseline, ThemeProvider, Typography } from &quot;@material-ui/core&quot;; // MUI **Typography** component
  import { Text, RichText } from &quot;@some-library/core&quot;; // some-library's **Text** component
  
  const theme = createMuiTheme({
    overrides: {
      typography: {
        h1: {
          fontFamily: Garamond,
          fontSize: pxToRem(56),
          lineHeight: pxToRem(64),
          letterSpacing: pxToRem(-0.5),
          [breakpoints.up(&quot;sm&quot;)]: {
            fontSize: pxToRem(72),
            lineHeight: pxToRem(76)
          },
          [breakpoints.up(&quot;md&quot;)]: {
            fontSize: pxToRem(104),
            lineHeight: pxToRem(112)
          },
          [breakpoints.up(&quot;lg&quot;)]: {
            fontSize: pxToRem(120),
            lineHeight: pxToRem(128),
            letterSpacing: pxToRem(-0.75)
          }
        }
      }
    }
  });
  
  function App() {
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;CssBaseline /&gt;
  
        &lt;Typography variant=&quot;h1&quot;&gt;MUI Typography Heading&lt;/Typography&gt;
  
        &lt;Text tag=&quot;h1&quot;&gt;Library B text component&lt;/Text&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  </code></pre>
  <p>All I want is to apply the same styles of the <code>&lt;Typography&gt;</code> for the <code>&lt;Text&gt;</code> component.</p>
  <p>I know can I can add className to the other component like <code>&lt;Text className={&quot;MuiTypography-root MuiTypography-h1&quot;} tag=&quot;h1&quot;</code>&gt;. Is that the right approach? And if I do like this would the props of  components also be used in the  component? Like <code>&lt;Text variant=&quot;h2&quot;&gt;</code> and would it take all the responsiveness of Typography too?</p>
  <p>Can the styles of MUI component be extended to another react component with all the other functionality (props etc) using any other way?</p>
  <p><a href="https://i.stack.imgur.com/FAL1B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FAL1B.png" alt="enter image description here" /></a></p>
  <p>I am trying to create a shared (<strong>MUI components + some-library components</strong>) component library and using MUI as the base library for components and styles. And I have created custom theme for the MUI components but not able to extend these styles to the components of another library which too has few basic components (text field, buttons, form elements etc).</p>
  <p>Please let know if the question makes sense as I am very new to react and MUI. Thanks much.</p>