I made a small library of React components but the problem is that I’m using Material UI. Material UI is using Roboto font which has to be linked to HTML head.

How can I export each React component with the Roboto font included?

Thanks!

CodePudding user response：

You can import Roboto inside any of your components like module

https://www.npmjs.com/package/@fontsource/roboto

import "@fontsource/roboto"; // Defaults to weight 400.

Also check official Material UI docs here https://mui.com/material-ui/react-typography/#install-with-npm

CodePudding user response：

As stated in my last comment above

I guess wrapping all texts inside your custom components is the only way to "provide" the font-family: Roboto; css style to the element and its descendants. Workaround for that could be <Box style={{fontFamily: "Roboto"}} or wrapping styled component for example with css styling : font-family: Roboto

See example here https://codesandbox.io/s/kind-forest-x93th3?file=/src/hello.jsx