Create React App example with styled-components & TypeScript
Create React App example with styled-components & TypeScript
The main difference between this and the non-typescript example is that you need to add the following path config to your tsconfig:
"paths": {
"@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
}
and install @types/styled-components:
npm install --save-dev @types/styled-components
Alternatively, to skip this configuration, you can set skipLibCheck: true in your tsconfig.
How to use
Download the example or clone the repo:
curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app-with-styled-components-typescript
cd create-react-app-with-styled-components-typescript
Install it and run:
npm install
npm start
CodeSandbox
Note that CodeSandbox is not supporting react-app-rewired, yet you can still see the code.
The following link leverages this demo: https://mui.com/guides/interoperability/ with Parcel’s alias feature within the package.json
The idea behind the example
This example demonstrates how you can setup Create React App with styled-components as a style engine for your application using TypeScript.
What’s next?
You now have a working example project.
You can head back to the documentation, continuing browsing it from the templates section.