Skip to content

Instantly share code, notes, and snippets.

@sokra

sokra/0 - MyComponent.jsx

Last active January 16, 2025 00:01
Download ZIP

Revisions

  1. sokra revised this gist May 20, 2015. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion 3 - Result.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,9 @@
    ``` html
    <div class="_3yaFGStEE5HZR76pgXnQ9U">
    <div class="_2at6lD9krUatPEotTdhwuH">
    <button class="_1LL5pTxICz82tUFVFhHfGJ _2pRVOQgXQi_rLFokPO3lXJ _18hpVr2Jy_wfoEMxTtmry6">Send</button>
    <button class="_1LL5pTxICz82tUFVFhHfGJ _2pRVOQgXQi_rLFokPO3lXJ _18hpVr2Jy_wfoEMxTtmry6">
    Send
    </button>
    </div>
    </div>
    ```
  2. sokra revised this gist May 20, 2015. 4 changed files with 0 additions and 0 deletions.
    0 MyComponent.jsx → 0 - MyComponent.jsx
    View file
    File renamed without changes.
    0 MyComponent.css → 1 - MyComponent.css
    View file
    File renamed without changes.
    0 button.css → 2 - button.css
    View file
    File renamed without changes.
    0 Result.md → 3 - Result.md
    View file
    File renamed without changes.
  3. sokra created this gist May 20, 2015.
    9 changes: 9 additions & 0 deletions MyComponent.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    :local(.root) {
    background: #EEE;
    }

    :local(.inner) {
    border-top: 1px solid #333;
    }

    :local(.sendButton):extends(.button.primary from "./button.css") {}
    12 changes: 12 additions & 0 deletions MyComponent.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    import React from "react";
    import styles from "./MyComponent.css";

    export class MyComponent {
    render() {
    return <div className={styles.root}>
    <div className={styles.inner}>
    <button className={styles.sendButton}>Send</button>
    </div>
    </div>
    }
    }
    30 changes: 30 additions & 0 deletions Result.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    ``` html
    <div class="_3yaFGStEE5HZR76pgXnQ9U">
    <div class="_2at6lD9krUatPEotTdhwuH">
    <button class="_1LL5pTxICz82tUFVFhHfGJ _2pRVOQgXQi_rLFokPO3lXJ _18hpVr2Jy_wfoEMxTtmry6">Send</button>
    </div>
    </div>
    ```

    ``` css
    ._2pRVOQgXQi_rLFokPO3lXJ {
    border: 1px solid black;
    }

    ._2pRVOQgXQi_rLFokPO3lXJ._1PenEhkLZRXb330B49idpc {
    background: #777;
    }

    ._2pRVOQgXQi_rLFokPO3lXJ._18hpVr2Jy_wfoEMxTtmry6 {
    background: #963;
    }
    ._3yaFGStEE5HZR76pgXnQ9U {
    background: #EEE;
    }

    ._2at6lD9krUatPEotTdhwuH {
    border-top: 1px solid #333;
    }

    ._1LL5pTxICz82tUFVFhHfGJ {}
    ```
    11 changes: 11 additions & 0 deletions button.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    :local(.button) {
    border: 1px solid black;
    }

    :local(.button.default) {
    background: #777;
    }

    :local(.button.primary) {
    background: #963;
    }