### Run tss-react Next.js App
Source: https://github.com/garronej/tss-react/blob/main/src/test/apps/next-appdir/README.md
Clone the repository, install dependencies, build the project, and start the server using yarn commands.
```bash
git clone https://github.com/garronej/tss-react
cd tss-react
yarn
yarn build
yarn start_ssr
```
--------------------------------
### Install and Run Demo Apps
Source: https://github.com/garronej/tss-react/blob/main/README.md
Instructions for cloning the repository, installing dependencies, building the project, and running various demo applications for testing.
```bash
git clone https://github.com/garronej/tss-react
cd tss-react
yarn
yarn build
npx tsc -w & npx tsc --module es2015 --outDir dist/esm -w
# Open another Terminal
yarn start_spa # For testing in in a Create React App setup
yarn start_ssr # For testing in a Next.js setup
yarn start_appdir # Next.js 13 setup in App directory mode
```
--------------------------------
### Complete Example using Compat Module
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/compat.md
A full example demonstrating the use of compatible makeStyles and withStyles from the tss-react/compat module.
```typescript
import { createMakeStyles, createWithStyles } from "tss-react/compat";
const useTheme = () => ({
palette: { primary: "blue" },
spacing: (n) => `${n * 8}px`
});
// Use compatible makeStyles
const { makeStyles } = createMakeStyles({ useTheme });
const useStyles = makeStyles()((theme) => ({
root: {
padding: theme.spacing(2),
color: theme.palette.primary
}
}));
// Use compatible withStyles
const { withStyles } = createWithStyles({ useTheme });
const StyledDiv = withStyles(
"div",
(theme) => ({
root: {
padding: theme.spacing(2),
backgroundColor: "#f5f5f5"
}
}),
{ name: "MyDiv" }
);
function MyComponent() {
const { classes } = useStyles();
return (
Content
);
}
```
--------------------------------
### Next.js App Router Layout Setup
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/Next.md
Example of setting up the NextAppDirEmotionCacheProvider in the root layout for the App Router. This ensures tss-react can inject styles during SSR.
```typescript
// app/layout.tsx
"use client";
import { NextAppDirEmotionCacheProvider } from "tss-react/next";
import { CacheProvider } from "@emotion/react";
export default function RootLayout({
children
}: { children: React.ReactNode }) {
return (
{children}
);
}
```
--------------------------------
### Compat Module withStyles Example
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/compat.md
Illustrates the usage of withStyles from the tss-react/compat module, where media queries are handled differently or not recommended.
```typescript
import { withStyles } from "tss-react/compat";
const StyledButton = withStyles(Button, (theme, props, classes) => ({
root: { padding: "8px 16px" }
// Media queries handled differently or not recommended
}));
```
--------------------------------
### Complete Themed Component Example
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/MUI-compat.md
Demonstrates how to create a fully themed component using makeStyles and withStyles from tss-react/mui-compat, along with Material-UI's ThemeProvider.
```typescript
import { makeStyles, withStyles } from "tss-react/mui-compat";
import { createTheme, ThemeProvider } from "@mui/material/styles";
const theme = createTheme({
palette: {
primary: {
main: "#1976d2"
},
secondary: {
main: "#dc004e"
}
},
spacing: (factor) => `${0.25 * factor}rem`
});
const useStyles = makeStyles()((theme) => ({
container: {
padding: theme.spacing(4),
backgroundColor: theme.palette.background.default
},
title: {
color: theme.palette.primary.main,
fontSize: theme.typography.h4.fontSize
}
}));
const StyledButton = withStyles(
Button,
(theme) => ({
root: {
backgroundColor: theme.palette.secondary.main,
color: "#fff",
"&:hover": {
backgroundColor: theme.palette.secondary.dark
}
}
})
);
function App() {
return (
);
}
function MyComponent() {
const { classes } = useStyles();
return (
Hello
Click
);
}
```
--------------------------------
### Creating Emotion Cache with Options
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/TssCacheProvider.md
Provides an example of how to import and configure `createCache` from `@emotion/cache`, including essential options like `key`, `nonce`, and `insertionPoint`.
```typescript
import createCache, { Options as CreateCacheOptions } from "@emotion/cache";
interface CreateCacheOptions {
key: string; // Required: CSS class prefix
prepend?: boolean; // Whether to prepend to head
insertionPoint?: Element; // Custom insertion point
nonce?: string; // CSP nonce for security
}
const cache = createCache({
key: "my-app",
nonce: process.env.REACT_APP_CSP_NONCE
});
```
--------------------------------
### API Compatibility Example with createTss
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/compat.md
Demonstrates the identical API of factory functions like createTss when used from the tss-react/compat module.
```typescript
import {
createTss,
createMakeStyles,
createWithStyles,
createMakeAndWithStyles,
TssCacheProvider,
GlobalStyles,
keyframes,
tss,
useStyles
} from "tss-react/compat";
// Same API as main module
const { tss: myTss } = createTss({
useContext: () => ({})
});
const { makeStyles } = createMakeStyles({
useTheme: () => ({})
});
const { withStyles } = createWithStyles({
useTheme: () => ({})
});
```
--------------------------------
### main-exports.md
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt
Provides an overview of the default entry point, main module exports, a pre-configured tss instance, and documentation for the useStyles hook with a complete usage example.
```APIDOC
## main-exports.md
### Description
This file details the default entry point of the tss-react library, including all main module exports, a pre-configured tss instance, and comprehensive documentation for the `useStyles` hook. It also provides a complete usage example.
### API Surface
- Default entry point
- Main module exports
- Pre-configured tss instance
- useStyles hook
```
--------------------------------
### MUI Theme Integration Setup
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/configuration.md
Demonstrates how to set up makeStyles for integration with Material-UI (MUI) themes. It automatically injects the useTheme hook from '@mui/material/styles'.
```typescript
import { useTheme } from "@mui/material/styles";
import { createMakeStyles } from "tss-react";
const { makeStyles } = createMakeStyles({
useTheme // Automatically injected from @mui/material
});
```
--------------------------------
### createMakeAndWithStyles Usage Example
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/main-exports.md
Demonstrates the convenience of `createMakeAndWithStyles` by combining `createMakeStyles` and `createWithStyles` into a single factory function. It shows how to destructure the returned `makeStyles` and `withStyles` functions.
```typescript
import { createMakeAndWithStyles } from "tss-react";
const { makeStyles, withStyles } = createMakeAndWithStyles({
useTheme: () => myTheme
});
```
--------------------------------
### Common Animations
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/keyframes.md
Examples of predefined common animations like Fade In, Slide Up, Pulse, and Rotate.
```APIDOC
## Common Animations
### Fade In
```typescript
const fadeIn = keyframes`
from {
opacity: 0;
}
to {
opacity: 1;
}
`;
// Usage
const useStyles = tss.create({
root: {
animation: `${fadeIn} 300ms ease-in`
}
});
```
### Slide Up
```typescript
const slideUp = keyframes`
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
`;
// Usage
const useStyles = tss.create({
root: {
animation: `${slideUp} 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)`
}
});
```
### Pulse
```typescript
const pulse = keyframes`
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
`;
// Usage
const useStyles = tss.create({
loader: {
animation: `${pulse} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite`
}
});
```
### Rotate
```typescript
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
// Usage
const useStyles = tss.create({
spinner: {
animation: `${rotate} 1s linear infinite`
}
});
```
```
--------------------------------
### createMakeAndWithStyles (Factory Function)
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/main-exports.md
A convenience function that combines `createMakeStyles` and `createWithStyles`. It simplifies setup when both hooks and HOCs are needed.
```APIDOC
## createMakeAndWithStyles (Factory Function)
### Description
Convenience function combining `createMakeStyles` and `createWithStyles`.
### Signature
```typescript
function createMakeAndWithStyles(params: {
useTheme: () => Theme;
cache?: EmotionCache;
}): {
makeStyles: (options?) => (styles) => (params) => UseStylesReturn,
withStyles: (Component, styles, options?) => StyledComponent
}
```
### Usage
```typescript
import { createMakeAndWithStyles } from "tss-react";
const { makeStyles, withStyles } = createMakeAndWithStyles({
useTheme: () => myTheme
});
```
```
--------------------------------
### CSSObject Example
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/types.md
Demonstrates the usage of the CSSObject type for defining styles with properties, pseudo-classes, media queries, and nested selectors.
```typescript
const styles: CSSObject = {
color: "blue",
backgroundColor: "white",
padding: "8px 16px",
fontSize: 16,
"&:hover": {
backgroundColor: "lightgray"
},
"@media (max-width: 600px)": {
padding: "4px 8px",
fontSize: 14
}
};
```
--------------------------------
### Complete tss-react Usage Example
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/main-exports.md
Demonstrates a full integration of tss-react in a React application. It shows how to set up global styles with animations and define component-specific styles using the tss instance.
```typescript
import {
createTss,
createMakeStyles,
GlobalStyles,
keyframes,
tss,
useStyles
} from "tss-react";
import type { CSSObject, Css, Cx } from "tss-react";
// Define global styles
const fadeIn = keyframes`
from { opacity: 0; }
to { opacity: 1; }
`;
function App() {
return (
<>
);
}
// Use pre-configured tss instance
const useMyStyles = tss.create({
root: { padding: 16 },
title: { fontSize: 20 }
});
function MyComponent() {
const { classes, css, cx } = useMyStyles();
const dynamicClass = css({
backgroundColor: "blue",
color: "white"
});
return (
Title
);
}
```
--------------------------------
### CxArg Example
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/types.md
Demonstrates the different types of arguments that can be passed to the 'cx' function, including strings, objects, arrays, and ignored values like undefined and null.
```typescript
const args: CxArg[] = [
"base-class", // string
undefined, // ignored
{ "active": true }, // object: adds "active"
{ "disabled": false }, // object: ignores "disabled"
[
"nested-class",
{ "condition": true }
]
];
// Result: "base-class active nested-class condition"
```
--------------------------------
### Install DSFR Dependencies
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/DSFR.md
Install the necessary DSFR package for integration with your React project. This command installs the official DSFR components.
```bash
npm install @codegouvfr/react-dsfr
```
--------------------------------
### ReactHTML Example Usage
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/types.md
Illustrates the structure of the ReactHTML type by showing specific mappings for 'div' and 'button' elements, including their props and return types.
```typescript
type ReactHTML = {
div: (props: DetailedHTMLProps, HTMLDivElement>) => ReactElement;
button: (props: DetailedHTMLProps, HTMLButtonElement>) => ReactElement;
// ... etc for all HTML elements
};
```
--------------------------------
### Migration Example: Compat to Main withStyles
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/compat.md
Illustrates the code change required when migrating from the compat module's withStyles to the main module's withStyles, particularly for media query support.
```typescript
// Before (compat)
import { withStyles } from "tss-react/compat";
const Styled = withStyles(Component, styles);
// After (main)
import { withStyles } from "tss-react";
const Styled = withStyles(Component, styles);
// Media queries now supported in styles
```
--------------------------------
### Class Composition Example with cx
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/mergeClasses.md
Shows how the `cx` function composes a generated CSS class with a runtime override, resulting in a combined class string. It also demonstrates how falsy override values are handled.
```typescript
// Generated class: "css-a1b2c3"
// Override: "custom-class"
// Result: "css-a1b2c3 custom-class"
// Override can also be false/null/undefined (cx handles it)
// Generated class: "css-a1b2c3"
// Override: undefined
// Result: "css-a1b2c3"
```
--------------------------------
### createTss.md
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt
Documents the `createTss` factory function, including its signature, parameter details, return type, and usage examples. It covers chainable methods and error handling.
```APIDOC
## createTss.md
### Description
This document describes the `createTss` factory function, which is used to create a tss instance. It includes detailed parameter documentation, return type specifications, usage examples, and information on chainable methods like `.withParams`, `.withName`, `.withNestedSelectors`, and `.create`.
### API Surface
- `createTss` factory function
- Chainable methods: `.withParams`, `.withName`, `.withNestedSelectors`, `.create`
```
--------------------------------
### Css Function Example
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/types.md
Illustrates how to use the 'css' function to generate class names from CSS objects and template literals, and how to apply them in JSX.
```typescript
const { css } = useStyles();
// With object
const className1 = css({ color: "blue" });
// With template
const className2 = css`
background-color: white;
padding: 8px;
`;
// Combined in JSX
Text
```
--------------------------------
### Resilience Examples for mergeClasses
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/mergeClasses.md
Illustrates how the mergeClasses function handles various invalid or undefined inputs for `classesOverrides` without causing errors.
```typescript
// All valid
useStyles({ classesOverrides: { root: "custom" } });
useStyles({ classesOverrides: undefined });
useStyles({ classesOverrides: null });
useStyles({ classesOverrides: { root: undefined } });
```
--------------------------------
### createMakeStyles.md
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt
Details the `createMakeStyles` factory function, its parameters, return type, and usage as a theme-aware hook. It covers dynamic parameters, nested selectors, and provides a complete usage example.
```APIDOC
## createMakeStyles.md
### Description
This file documents the `createMakeStyles` factory function, outlining its signature, parameters, and return type. It explains its use as a theme-aware hook, demonstrates dynamic parameter styling, and details support for nested selectors. A complete usage example is provided.
### API Surface
- `createMakeStyles` factory function
- Theme-aware hook pattern
```
--------------------------------
### TssCacheProvider for Server-Side Rendering (SSR)
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/TssCacheProvider.md
Illustrates the essential setup for server-side rendering using TssCacheProvider. It involves creating a server-side cache, rendering the app, and extracting critical styles.
```typescript
import createCache from "@emotion/cache";
import createEmotionServer from "@emotion/server/create-instance";
// Server-side
function renderToString(App) {
const cache = createCache({ key: "ssr" });
// Render app with cache
const html = renderToStaticMarkup(
);
// Extract styles
const emotionServer = createEmotionServer(cache);
const { css, ids } = emotionServer.extractCriticalToChunks(html);
return { html, css, ids };
}
```
--------------------------------
### GlobalStyles.md
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt
Documents the `GlobalStyles` component for injecting global CSS. It covers parameter documentation, multiple usage patterns, CSS reset examples, and keyframes integration.
```APIDOC
## GlobalStyles.md
### Description
This file details the `GlobalStyles` component, which is used for injecting global CSS into the application. It includes parameter documentation, various usage patterns, examples for CSS resets, and integration with keyframes.
### API Surface
- `GlobalStyles` component
- Global CSS injection
```
--------------------------------
### Integration with MUI Theme Overrides Example
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/MUI.md
Demonstrates how to use tss-react with MUI's theme overrides to customize component styles, including nested selectors and hover states.
```typescript
import { tss, useMuiThemeStyleOverridesPlugin } from "tss-react/mui";
const useStyles = tss
.withName("Button")
.create(({ theme }) => ({
root: {
padding: theme.spacing(1, 2),
color: theme.palette.primary.main
}
}));
function Button({ children, classes }) {
const { classes: overriddenClasses } = useStyles({
muiStyleOverridesParams: {
props: { variant: "contained" }
}
});
return (
);
}
// In theme definition
const theme = createTheme({
components: {
Button: {
styleOverrides: {
root: {
fontSize: 14,
textTransform: "uppercase",
"&:hover": { backgroundColor: "rgba(0,0,0,0.1)" }
}
}
}
}
});
```
--------------------------------
### TssCacheProvider.md
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt
Explains the `TssCacheProvider` component for cache management. It covers parameter documentation, custom cache configuration, SSR setup with caching, and cache priority systems.
```APIDOC
## TssCacheProvider.md
### Description
This document describes the `TssCacheProvider` component, responsible for managing the cache. It includes parameter documentation, details on custom cache configuration, Server-Side Rendering (SSR) setup with caching, and the cache priority system.
### API Surface
- `TssCacheProvider` component
- Cache management
```
--------------------------------
### Create withStyles HOC Factory
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/createWithStyles.md
Use createWithStyles to set up the withStyles HOC with a theme hook and an optional Emotion cache. This is the initial setup step before creating styled components.
```typescript
import { createWithStyles } from "tss-react";
const useTheme = () => ({ palette: { primary: "blue" } });
const { withStyles } = createWithStyles({ useTheme });
```
--------------------------------
### Cx Function Example
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/types.md
Shows various ways to use the 'cx' function for composing class names, including string concatenation, conditional object mapping, and mixed arguments.
```typescript
const { cx, classes } = useStyles();
// String composition
const className = cx(classes.root, classes.variant);
// Conditional classes
const className2 = cx(classes.root, {
[classes.active]: isActive,
[classes.disabled]: isDisabled
});
// Mixed
const className3 = cx(
classes.root,
isMobile ? classes.mobileRoot : classes.desktopRoot,
{
[classes.focused]: hasFocus
}
);
```
--------------------------------
### Higher-Order Component (HOC) Styling
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/README.md
Use `createWithStyles` to create a HOC that injects styles into a component. This example shows how to style a `Button` component using theme properties.
```typescript
import { createWithStyles } from "tss-react";
const StyledButton = createWithStyles({
useTheme: () => myTheme
}).withStyles(Button, (theme) => ({
root: { color: theme.palette.primary }
}));
```
--------------------------------
### MUI Compat Module Initialization
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/compat.md
Shows how to initialize makeStyles and withStyles using the specialized MUI compatibility module.
```typescript
import { makeStyles, withStyles } from "tss-react/mui-compat";
const { makeStyles } = createMakeAndWithStyles({
useTheme: () => useTheme()
});
```
--------------------------------
### Usage Example: DSFR Button Component
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/DSFR.md
A complete example of a button component styled using tss-react with DSFR integration. It demonstrates creating a custom button that respects DSFR's dark mode.
```typescript
import { tss } from "tss-react/dsfr";
import { Button } from "@codegouvfr/react-dsfr/Button";
const useStyles = tss
.withName("DsfrButton")
.create(({ isDark }) => ({
root: {
padding: "12px 24px",
borderRadius: 4,
fontSize: 14,
fontWeight: 500,
transition: "background-color 200ms ease",
backgroundColor: isDark ? "#3c3c3c" : "#e5e5e5",
color: isDark ? "#ffffff" : "#000000",
border: "none",
cursor: "pointer",
"&:hover": {
backgroundColor: isDark ? "#4a4a4a" : "#d4d4d4"
}
}
}));
function DsfrButton({ children, ...props }) {
const { classes } = useStyles();
return (
);
}
export default DsfrButton;
```
--------------------------------
### Animation Timing
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/keyframes.md
Provides examples of common CSS animation timing functions that can be used with keyframes.
```APIDOC
## Animation Timing
Common timing functions:
```typescript
const useStyles = tss.create({
easeIn: { animation: `${fade} 1s ease-in` },
easeOut: { animation: `${fade} 1s ease-out` },
easeInOut: { animation: `${fade} 1s ease-in-out` },
linear: { animation: `${fade} 1s linear` },
cubic: { animation: `${fade} 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)` }
});
```
```
--------------------------------
### tss-react (main) - Pre-configured Instances
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/API-INDEX.md
Offers pre-configured instances for immediate use, including a default Tss instance and a useStyles hook.
```APIDOC
## tss
### Description
The default Tss instance, pre-configured for use without a specific theme context.
### Type
Tss<...>
### Purpose
Provides a ready-to-use Tss instance for styling in applications that do not rely on a theme.
## useStyles
### Description
A React hook that provides access to the `css` and `cx` functions for styling.
### Type
Hook
### Purpose
Simplifies the process of applying styles within functional components by providing utility functions for CSS creation and class composition.
```
--------------------------------
### tss-react/next/pagesDir - Functions
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/API-INDEX.md
Offers functions for Next.js Pages Router support, including advanced SSR setup.
```APIDOC
## createEmotionSsrAdvancedApproach
### Description
Sets up Server-Side Rendering (SSR) for the Next.js Pages Router using an advanced approach.
### Signature
`(options, CacheProvider?) => { ... }`
### Purpose
Facilitates robust SSR for applications built with the Next.js Pages Router, ensuring styles are correctly rendered on the server and hydrated on the client.
```
--------------------------------
### Slide Up Animation
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/keyframes.md
Define a 'slide up' animation that moves an element from below into view. This example demonstrates the keyframes definition and its application.
```typescript
const slideUp = keyframes`
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
`;
// Usage
const useStyles = tss.create({
root: {
animation: `${slideUp} 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)`
}
});
```
--------------------------------
### Basic makeStyles Usage
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/createMakeStyles.md
Demonstrates the fundamental usage of `createMakeStyles` to define and use styles with theme awareness. Ensure `createMakeStyles` is imported and the `useTheme` hook is provided.
```typescript
import { createMakeStyles } from "tss-react";
const useTheme = () => ({ palette: { primary: "blue" } });
const { makeStyles } = createMakeStyles({ useTheme });
// Define styles with theme
const useStyles = makeStyles()(
(theme) => ({
root: {
color: theme.palette.primary
},
title: {
fontSize: 24
}
})
);
// Use in component
function MyComponent() {
const { classes } = useStyles();
return
{/* ... */}
;
}
```
--------------------------------
### Customizing NextAppDirEmotionCacheProvider Options
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/Next.md
Demonstrates how to configure the NextAppDirEmotionCacheProvider with custom options like key, nonce for CSP, and prepend for style insertion order.
```typescript
{children}
```
--------------------------------
### makeStyles with Dynamic Props
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/MUI.md
Demonstrates how to define styles using `makeStyles` that dynamically adapt based on component props and the Material-UI theme.
```APIDOC
## makeStyles with Dynamic Props
### Description
Styles defined using `makeStyles` can dynamically adapt based on component props and the Material-UI theme.
### Usage
```typescript
const useStyles = makeStyles<{ variant?: "primary" | "secondary" }>()
((theme, { variant = "primary" }) => ({
root: {
backgroundColor: variant === "primary"
? theme.palette.primary.main
: theme.palette.secondary.main,
color: theme.palette.primary.contrastText,
padding: theme.spacing(2)
}
}));
function Button({ variant, children }) {
const { classes } = useStyles({ variant });
return ;
}
```
### Parameters
- `theme` (object): The Material-UI theme object.
- `props` (object): An object containing the component's props. The type can be specified when calling `makeStyles`. In the example, it's `{ variant?: "primary" | "secondary" }`.
### Example
```typescript
const useStyles = makeStyles<{ variant?: "primary" | "secondary" }>()
((theme, { variant = "primary" }) => ({
root: {
backgroundColor: variant === "primary"
? theme.palette.primary.main
: theme.palette.secondary.main,
color: theme.palette.primary.contrastText,
padding: theme.spacing(2)
}
}));
function MyButton({ variant, children }) {
const { classes } = useStyles({ variant });
return ;
}
```
```
--------------------------------
### Rotate Animation
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/keyframes.md
Create a continuous rotation animation for elements like spinners. This example defines the `rotate` keyframes and its application in styles.
```typescript
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
// Usage
const useStyles = tss.create({
spinner: {
animation: `${rotate} 1s linear infinite`
}
});
```
--------------------------------
### Pages Router SSR Cache Configuration
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/Next.md
Factory function and example for creating a tss-react cache configuration for Next.js Pages Router SSR.
```typescript
// lib/createEmotionCache.ts
import { createEmotionSsrAdvancedApproach } from "tss-react/next/pagesDir";
export const { EmotionCacheProvider, withEmotionCache } =
createEmotionSsrAdvancedApproach({
key: "css",
nonce: process.env.NEXT_PUBLIC_CSP_NONCE
});
```
--------------------------------
### Using Standard MUI-Compat Exports
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/MUI-compat.md
Illustrates the usage of standard makeStyles, withStyles, useStyles, and tss exports from the tss-react/mui-compat module, demonstrating compatibility with common patterns.
```typescript
import {
makeStyles,
withStyles,
useStyles,
tss
} from "tss-react/mui-compat";
// All standard patterns work
const useStyles = makeStyles()((theme) => ({ /* ... */ }));
const StyledComponent = withStyles(Component, styles);
const { css, cx } = useStyles();
const myUseStyles = tss.create({ /* ... */ });
```
--------------------------------
### Using tss-react in App Router Components
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/Next.md
Example of using tss-react within a client component in the App Router after the cache provider has been set up.
```typescript
// app/components/Button.tsx
"use client";
import { tss } from "tss-react";
const { tss: appTss } = tss.withName("Button");
const useStyles = appTss.create({
root: {
padding: "8px 16px",
backgroundColor: "blue",
color: "white",
border: "none",
cursor: "pointer",
"&:hover": { opacity: 0.8 }
}
});
export function Button({ children, ...props }) {
const { classes } = useStyles();
return (
);
}
```
--------------------------------
### Basic Usage with makeStyles and withStyles
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/MUI-compat.md
Demonstrates how to use `makeStyles` for component-specific styles and `withStyles` to wrap a Material-UI component (`MuiButton`) with custom styling, both accessing the MUI theme.
```typescript
import { makeStyles, withStyles } from "tss-react/mui-compat";
import { Button as MuiButton } from "@mui/material";
const useStyles = makeStyles()((theme) => ({
root: {
color: theme.palette.primary.main,
padding: theme.spacing(2)
}
}));
const StyledButton = withStyles(
MuiButton,
(theme) => ({
root: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
"&:hover": {
backgroundColor: theme.palette.primary.dark
}
}
}),
{ name: "StyledButton" }
);
function MyComponent() {
const { classes } = useStyles();
return (
<>
Content
Click me
);
}
```
--------------------------------
### CSSInterpolation Example
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/types.md
Shows how to use 'CSSInterpolation' values, including CSS objects, strings, numbers, and arrays, within the 'css' function for dynamic styling.
```typescript
const baseStyles: CSSObject = { padding: 16 };
const conditional: CSSInterpolation = isActive ? { color: "blue" } : null;
const className = css`
${baseStyles}
${conditional}
`;
```
--------------------------------
### Keyframes with Dynamic Parameters
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/keyframes.md
Define keyframes that accept dynamic values using interpolation. This example shows a `slideIn` animation where the distance can be passed as a parameter.
```typescript
const slideIn = (distance: number) => keyframes`
from {
transform: translateX(${distance}px);
}
to {
transform: translateX(0);
}
`;
// Usage
const useStyles = tss
.withParams<{ distance: number }>()
.create(({ distance }) => ({
root: {
animation: `${slideIn(distance)} 0.5s ease-in-out`
}
}));
```
--------------------------------
### useStyles (Pre-configured Instance)
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/main-exports.md
A standalone hook providing `css` and `cx` utilities without predefined styles. It allows for dynamic class name generation.
```APIDOC
## useStyles (Pre-configured Instance)
### Description
A standalone hook providing `css` and `cx` without predefined styles.
### Usage
```typescript
import { useStyles } from "tss-react";
function MyComponent() {
const { css, cx } = useStyles();
const className1 = css({ color: "blue" });
const className2 = cx({ "active": isActive });
return
Content
;
}
```
```
--------------------------------
### Keyframes with Parameters
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/keyframes.md
Demonstrates how to use interpolation within keyframes to create dynamic animations based on parameters.
```APIDOC
## With Parameters
Use interpolation in keyframes for dynamic values:
```typescript
const slideIn = (distance: number) => keyframes`
from {
transform: translateX(${distance}px);
}
to {
transform: translateX(0);
}
`;
// Usage
const useStyles = tss
.withParams<{ distance: number }>()
.create(({ distance }) => ({
root: {
animation: `${slideIn(distance)} 0.5s ease-in-out`
}
}));
```
```
--------------------------------
### tss (Pre-configured Instance)
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/main-exports.md
A default Tss instance for styling without theme context. It's useful for applications that do not require theme integration.
```APIDOC
## tss (Pre-configured Instance)
### Description
A default `Tss` instance for styling without theme context.
### Usage
```typescript
import { tss } from "tss-react";
const useStyles = tss
.withName("MyComponent")
.create({
root: { padding: 16 },
title: { fontSize: 20 }
});
function MyComponent() {
const { classes, css, cx } = useStyles();
return
Content
;
}
```
```
--------------------------------
### Create Tss Instance with Empty Context
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/createTss.md
Basic usage of createTss with an empty context object. No specific setup is required beyond importing the function.
```typescript
import { createTss } from "tss-react";
// Basic usage with empty context
const { tss } = createTss({
useContext: () => ({})
});
```
--------------------------------
### createWithStyles.md
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt
Explains the `createWithStyles` Higher-Order Component (HOC) factory function, its parameter documentation, and usage for wrapping HTML elements. It covers dynamic styles, media query support, and automatic name extraction.
```APIDOC
## createWithStyles.md
### Description
This document covers the `createWithStyles` HOC factory function. It details its parameter documentation and explains how it's used for wrapping HTML elements, applying dynamic styles based on props, and supporting media queries. It also discusses automatic name extraction and component wrapping patterns.
### API Surface
- `createWithStyles` HOC factory function
- HTML element wrapping
```
--------------------------------
### Global Animations with GlobalStyles
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/keyframes.md
Illustrates how to use keyframes with `GlobalStyles` to apply animations globally to the document.
```APIDOC
## Global Animations with GlobalStyles
Use keyframes with `GlobalStyles` for document-wide animations:
```typescript
import { GlobalStyles, keyframes } from "tss-react";
const fadePageIn = keyframes`
from {
opacity: 0;
}
to {
opacity: 1;
}
`;
function App() {
return (
<>
{/* Rest of app */}
);
}
```
```
--------------------------------
### Exported Pre-configured Instances
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/main-exports.md
Provides ready-to-use instances of the styling API. 'tss' is for styling without theme integration, while 'useStyles' offers a hook for dynamic class name generation.
```typescript
// Pre-configured instances
export const tss: Tss<...>;
export const useStyles: UseStyles<>;
```
--------------------------------
### CSP Nonce Configuration
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/Next.md
Demonstrates how to configure a CSP nonce for `NextAppDirEmotionCacheProvider` to enhance security by passing a generated nonce to the style tag.
```typescript
const nonce = crypto.getRandomValues(new Uint8Array(16))
.toString();
{children}
// Pass nonce to style tag rendering
```
--------------------------------
### Basic SSR Emotion Cache
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/configuration.md
Creates a basic Emotion cache for Server-Side Rendering (SSR) with a specified key. This is a common starting point for SSR configurations.
```typescript
// Basic SSR cache
const cache = createCache({ key: "css" });
```
--------------------------------
### Main Module withStyles with Media Queries
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/compat.md
Demonstrates how the main tss-react module supports media queries within withStyles style definitions.
```typescript
import { withStyles } from "tss-react";
const StyledButton = withStyles(Button, {
root: { padding: "8px 16px" },
"@media (max-width: 600px)": {
root: { padding: "4px 8px" }
}
});
```
--------------------------------
### Custom Plugin for Style Transformation
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/configuration.md
Implements a custom plugin for tss-react to modify generated class names. This example appends a prefix to all generated class names before they are applied.
```typescript
const { tss } = createTss({
useContext: () => ({ theme: useTheme() }),
usePlugin: ({ classes, css, cx, theme, name }) => {
// Transform classes before returning
const transformed = {};
for (const [ruleName, className] of Object.entries(classes)) {
transformed[ruleName] = className + " custom-prefix";
}
return { classes: transformed, css, cx };
}
});
```
--------------------------------
### keyframes.md
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt
Documents the `keyframes` function for creating CSS animations. It covers signature documentation, multiple animation examples, dynamic keyframes with parameters, and animation properties reference.
```APIDOC
## keyframes.md
### Description
This file details the `keyframes` function used for creating CSS animations. It provides signature documentation, multiple animation examples (e.g., fade in, slide up), and explains how to use dynamic keyframes with parameters. It also includes a reference for animation properties.
### API Surface
- `keyframes` function
- CSS animation creation
```
--------------------------------
### Global Animations with GlobalStyles
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/keyframes.md
Apply keyframe animations globally to the document, such as animating the page load. This example uses `GlobalStyles` to apply a `fadePageIn` animation to the `body` element.
```typescript
import { GlobalStyles, keyframes } from "tss-react";
const fadePageIn = keyframes`
from {
opacity: 0;
}
to {
opacity: 1;
}
`;
function App() {
return (
<>
{/* Rest of app */}
);
}
```
--------------------------------
### Exporting from Main and Compat Modules
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/MUI-compat.md
Shows how to import makeStyles and withStyles from both the main tss-react/mui export and the specific mui-compat module.
```typescript
// Main module with compat withStyles
import { useStyles, tss } from "tss-react/mui";
// Compat module (simplified withStyles)
import { makeStyles, withStyles } from "tss-react/mui-compat";
```
--------------------------------
### Pre-configured tss Instance for DSFR
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/DSFR.md
Demonstrates creating a tss instance with DSFR's dark mode context. Use this for components that need to adapt to dark mode.
```typescript
import { tss } from "tss-react/dsfr";
const useStyles = tss
.withName("MyComponent")
.create(({ isDark }) => ({
root: {
color: isDark ? "#ffffff" : "#000000",
backgroundColor: isDark ? "#1a1a1a" : "#ffffff"
}
}));
```
--------------------------------
### Media Queries with makeStyles
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/configuration.md
Define media queries using an object syntax within the `makeStyles` function. This supports responsive styles and theme integration.
```typescript
const useStyles = makeStyles()(
(theme) => ({
root: { fontSize: 16 },
"@media (max-width: 600px)": {
root: {
fontSize: theme.typography.body2.fontSize
}
}
})
);
```
--------------------------------
### makeStyles with Nested Selectors
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/MUI.md
Illustrates how to define styles using `makeStyles` that include nested selectors, allowing references to other rule names within the style definitions.
```APIDOC
## makeStyles with Nested Selectors
### Description
Styles can be defined using `makeStyles` with nested selectors, enabling references to other rule names within the style definitions.
### Usage
```typescript
const useStyles = makeStyles(
{ name: "Card" }
)(
(theme, params, classes) => ({
root: {
padding: theme.spacing(2),
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.background.paper
},
title: {
fontSize: 18,
fontWeight: 600
},
rootHover: {
[`.${classes.title}`]: {
color: theme.palette.primary.main
}
}
})
);
```
### Parameters
- `theme` (object): The Material-UI theme object.
- `params` (object): Any additional parameters passed to the hook.
- `classes` (object): An object containing the generated class names for the defined rules.
### Example
```typescript
const useStyles = makeStyles(
{ name: "Card" }
)(
(theme, params, classes) => ({
root: {
padding: theme.spacing(2),
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.background.paper
},
title: {
fontSize: 18,
fontWeight: 600
},
rootHover: {
[`.${classes.title}`]: {
color: theme.palette.primary.main
}
}
})
);
function Card({ children }) {
const { classes } = useStyles();
return (
{children}
);
}
```
```
--------------------------------
### Creating tss with DSFR Context
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/DSFR.md
Configures a tss instance to use DSFR's dark mode context. This setup is essential for components that need to react to theme changes.
```typescript
export const { tss } = createTss({
useContext: function useDsfrContext() {
const { isDark } = useIsDark();
return { isDark };
}
});
```
--------------------------------
### App Router Styling Pattern
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/Next.md
Shows how to implement client-side styling in Next.js App Router using `createTss` and the `"use client"` directive. Styles are defined and applied similarly to the Pages Router pattern.
```typescript
// app/components/Styled.tsx
"use client";
import { createTss } from "tss-react";
const { tss } = createTss({ useContext: () => ({}) });
const useStyles = tss.create({
root: { padding: 16 }
});
export function Styled() {
const { classes } = useStyles();
return
Content
;
}
```
--------------------------------
### MUI-compat.md
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt
Explains the compatibility mode for Material-UI integration. It covers its role as a drop-in replacement, differences from the standard MUI integration, and MUI theme access patterns.
```APIDOC
## MUI-compat.md
### Description
This document describes the compatibility mode for Material-UI (MUI) integration within tss-react. It details its function as a drop-in replacement, highlights differences from the standard MUI integration, and explains MUI theme access patterns and how component props are used in styles.
### API Surface
- MUI compatibility mode
- Drop-in replacement for main module
```
--------------------------------
### Media Query Patterns with Object Syntax
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/configuration.md
Define media queries using an object syntax within the `tss.create` method. This allows for responsive styles directly in the style object.
```typescript
const useStyles = tss.create({
root: { fontSize: 16 },
"@media (max-width: 600px)": {
root: { fontSize: 14 }
},
"@media (max-width: 400px)": {
root: { fontSize: 12 }
}
});
```
--------------------------------
### Using Multiple GlobalStyles Components
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/GlobalStyles.md
Demonstrates how to use multiple GlobalStyles components to apply different sets of global styles. Each component injects its styles independently.
```typescript
<>
```
--------------------------------
### Using Animation Shorthand Property
Source: https://github.com/garronej/tss-react/blob/main/_autodocs/api-reference/keyframes.md
Utilize the `animation` shorthand property to define multiple animation aspects in a single declaration. This example shows `slideUp` with duration, timing function, and fill mode.
```typescript
const useStyles = tss.create({
root: {
animation: `${slideUp} 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards`
// Equivalent to:
// animationName: slideUp,
// animationDuration: "0.4s",
// animationTimingFunction: "cubic-bezier(0.34, 1.56, 0.64, 1)",
// animationFillMode: "forwards"
}
});
```