styled-is is a utility library designed to simplify conditional styling within `styled-components` by providing declarative functions for checking component props. It offers functions like `is`, `isNot`, `isOr`, and `isSomeNot` for boolean prop checks, as well as `match` for value-based prop comparisons. The current stable version, 1.3.0, indicates a mature and stable project focused on a specific use case within the `styled-components` ecosystem. The library aims to enable cleaner and more readable style definitions, reducing the need for verbose ternary operators or complex prop destructuring directly within styled templates. It ships with TypeScript types, enhancing the developer experience in TypeScript projects by providing strong type checking and IDE autocompletion.
npm install styled-isVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to use `styled-is` functions like `is`, `isNot`, `isOr`, and `match` to create conditionally styled `ThemedButton` components in a React application. It showcases various prop-based styling scenarios including simple booleans, combined booleans, value matching, and a dynamic compact size based on a prop, rendering several button variations.
Refer to the `styled-is` `package.json` for precise `styled-components` peer dependency versions. Upgrade or downgrade `styled-components` accordingly using `npm install styled-components@X.Y.Z` or `yarn add styled-components@X.Y.Z`.
For explicit boolean `false` checks, use `isNot('propName')`. For specific values, use `match('propName', 'value')`. For complex logic, pass a function: `${is((props) => props.propName === true)`.Prefix props intended only for styling with a dollar sign (e.g., `$primary` instead of `primary`) when defining your styled components. Alternatively, configure `shouldForwardProp` via `StyleSheetManager` or `styled.div.withConfig()` to filter props.
Always define your styled components outside of the render method of your React components, typically at the top level of the file or in a separate styles file. This ensures they are created once and reused.
Correct the import statement to use the default import syntax: `import is from 'styled-is';`
Ensure that any prop values affecting `styled-is` logic are consistent between server and client. For dynamic values that differ, consider using a `useState` hook with `useEffect` for client-side only effects, or use `suppressHydrationWarning` on the element if the mismatch is benign.
Ensure `import styled from 'styled-components';` is present at the top of your file. If using `styled-components` v6+, ensure you are using named imports: `import { styled } from 'styled-components';`.