Our great sponsors
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
-
material-ui-docs
⚠️ Please don't submit PRs here as they will be closed. To edit the docs or source code, please use the main repository:
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
There are NPM packages like react-responsive that provide custom hooks for easy usage of Media Queries:
This is an example of this technique I used in one of my projects:
Tailwind CSS has multiple pre-defined screen sizes (breakpoints) that are compiled to the relevant Media Query (e.g. md will compile to @media (min-width: 768px) { ... }). You can use these breakpoints to easily apply different styles for different screen sizes:
You can use Media Queries in Styled-Components similar to how you would use them in CSS, other than the fact that you can define custom screen sizes in your theme and access them inside your Media Queries:
Material UI has its own set of breakpoints that can be customized in your theme. You can use them inside the sx prop to customize your styles for different screen sizes: