Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

medium bookmark / Raindrop.io |
Stylable integrates with React components using our custom React integration. The integration adds TypeScript and runtime support helpers so you can define your own stylable-react-components.
If you don’t use the custom integration, you can manually integrate Stylable with a React component as described below. You can also build your own helpers.
Before you begin, read the Runtime guide to understand the Stylable runtime API.
To manualy integrate Stylable to a React component, you must first mark the root element of the component:
import style from "style.st.css";
class Comp extends React.Component {
render() {
return (
<div { ...style('root', { stateA: true, stateB: false }, this.props) }></div>
);
}
}
The result of the above generates and adds the props needed to define the root element for styling:
className
data-*
attributesclassName
override from component props to the root className
data-*
propsNote
To enable external styling, we recommend passing the propsclassName
anddata-*
. To make the component more stylable, we also recommend also merging thestyle
prop.
All nodes, other than root
, can be marked directly with the class mapping and the $cssStates function:
import style from "style.st.css";
class Comp extends React.Component {
render() {
return (
<div { ...style('root', {}, this.props) }>
<span className={style.label} { ...style.$cssStates({ stateA: true ) }></span>
</div>
);
}
}
Use Stylable React integration from wix-react-tools to set a Stylable stylesheet for a React component or stateless functional component (SFC).
Install wix-react-tools as a dependency in your local project.
Using npm:
npm install wix-react-tools --save
Using yarn:
yarn add wix-react-tools
When applying Stylable to a React component, any className
or data-*
properties are copied to the resulting root element of the component. Further, the root class of the stylesheet is added to the root element automatically.
import {stylable} from 'wix-react-tools';
import stylesheet from './style.st.css'
@stylable(stylesheet)
class Comp extends React.Component {...}
stylable(stylesheet)(class Comp extends React.Component {...});
stylable(stylesheet)(props => {...});
All CSS class selectors that are in the stylesheet can be applied to any element in the render through the className
property.
@stylable(stylesheet)
class Comp extends React.Component {
render() {
return (
<div>
<div className="item" />
</div>
);
}
}
Stylable offers custom states that can be defined on any CSS class selectors. Add a style-state
property to any element to control whether to enable a custom state or not.
@stylable(stylesheet)
class Comp extends React.Component {
render() {
return <div style-state={ {"a": true, "b": false} } >
<div style-state={ {"x": true, "y": false} } />
</div>;
}
}
AI-driven updates, curated by humans and hand-edited for the Prototypr community