large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://stylable.io/docs/getting-started/react-integration#automatic-integration-with-wix-react-tools">medium bookmark / Raindrop.io</a> |  </p>
<p><strong>Stylable</strong> 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.</p>
<p>If you don’t use the custom integration, you can manually integrate <strong>Stylable</strong> with a React component as described below. You can also build your own helpers.</p>
<h2>Manual Integration</h2>
<p>Before you begin, read the <a href="https://stylable.io/docs/guides/runtime">Runtime guide</a> to understand the <strong>Stylable</strong> runtime API.</p>
<p>To manualy integrate <strong>Stylable</strong> to a React component, you <strong>must</strong> first mark the root element of the component:</p>
<pre><code>import style from "style.st.css"; 
 
class Comp extends React.Component { 
    render() { 
        return ( 
            &lt;div { ...style('root', { stateA: true, stateB: false }, this.props) }&gt;&lt;/div&gt; 
        ); 
    } 
} 
</code></pre>
<p>The result of the above generates and adds the props needed to define the root element for styling:</p>
<ul>
<li>Marks component root by setting the root target <code>className</code></li>
<li>Sets component states using <code>data-*</code> attributes</li>
<li>Appends <code>className</code> override from component props to the root <code>className</code></li>
<li>Custom or overriden component states are added from external <code>data-*</code> props</li>
</ul>
<blockquote>
<p><strong>Note</strong><br /> <br />
To enable external styling, we recommend passing the props <code>className</code> and <code>data-*</code>. To make the component more stylable, we also recommend also merging the <code>style</code> prop.</p>
</blockquote>
<p>All nodes, other than <code>root</code>, can be marked directly with the class mapping and the <a href="https://stylable.io/docs/guides/runtime#custom-state-mapping">$cssStates</a> function:</p>
<pre><code>import style from "style.st.css"; 
 
class Comp extends React.Component { 
    render() { 
        return ( 
            &lt;div { ...style('root', {}, this.props) }&gt; 
                &lt;span className={style.label} { ...style.$cssStates({ stateA: true ) }&gt;&lt;/span&gt; 
            &lt;/div&gt; 
        ); 
    } 
} 
</code></pre>
<h2>Automatic integration with Wix React Tools</h2>
<p>Use <strong>Stylable</strong> React integration from <a href="https://github.com/wix/wix-react-tools">wix-react-tools</a> to set a <strong>Stylable</strong> stylesheet for a React component or stateless functional component (SFC).</p>
<p>Install <strong>wix-react-tools</strong> as a dependency in your local project.</p>
<p>Using npm:</p>
<div>
<pre><code>npm install wix-react-tools --save 
</code></pre>
</div>
<p>Using yarn:</p>
<div>
<pre><code>yarn add wix-react-tools 
</code></pre>
</div>
<h3>Use</h3>
<p>When applying <strong>Stylable</strong> to a React component, any <code>className</code> or <code>data-*</code> properties are copied to the resulting root element of the component. Further, the <a href="https://stylable.io/docs/references/root">root class</a> of the stylesheet is added to the root element automatically.</p>
<pre><code>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 =&gt; {...}); 
</code></pre>
<h4>CSS classes</h4>
<p>All <a href="https://stylable.io/docs/references/class-selectors">CSS class selectors</a> that are in the stylesheet can be applied to any element <strong>in the render</strong> through the <code>className</code> property.</p>
<pre><code>@stylable(stylesheet) 
class Comp extends React.Component { 
    render() { 
        return ( 
            &lt;div&gt; 
                &lt;div className="item" /&gt; 
            &lt;/div&gt; 
        ); 
    } 
} 
</code></pre>
<h4>Custom states</h4>
<p><strong>Stylable</strong> offers <a href="https://stylable.io/docs/references/pseudo-classes">custom states</a> that can be defined on any CSS class selectors. Add a <code>style-state</code> property to any element to control whether to enable a custom state or not.</p>
<pre><code>@stylable(stylesheet) 
class Comp extends React.Component { 
    render() { 
        return &lt;div style-state={ {"a": true, "b": false} } &gt; 
            &lt;div style-state={ {"x": true, "y": false} } /&gt; 
        &lt;/div&gt;; 
    } 
} 
</code></pre>
<div><a href="https://stylable.io/docs/getting-started/react-integration#automatic-integration-with-wix-react-tools">https://stylable.io/docs/getting-started/react-integration#automatic-integration-with-wix-react-tools</a></div>


React Integration

React Integration

Top Stories