Skip to content

Add props.class attributes#6

Open
matthewmcneely wants to merge 1 commit intoesinx:masterfrom
matthewmcneely:matthewmcneely/add-props-class
Open

Add props.class attributes#6
matthewmcneely wants to merge 1 commit intoesinx:masterfrom
matthewmcneely:matthewmcneely/add-props-class

Conversation

@matthewmcneely
Copy link

This allows the svg paths that draw the arrows to be styled. Here's an example of responding to global CSS (dark-mode) class changes

    <div class="parent">
    <Tree class="treeClass" tree={structureTree} let:node>
        {#if node.children}
            <div class="tree-node">{node.name}</div>
        {:else}
            <div class="label-node"><AbilityBug ability={getAbilityBySkill(node.id)}></AbilityBug></div>
        {/if}
    </Tree>
    </div>

<style>
    .tree-node {
        line-height: 1.8;
    }
    :global(body.dark-mode) .parent :global(.treeClass) {
        fill: #bfc2c7;
    }
</style>

This allows the svg paths that draw the arrows to be styled. Here's an example of responding to global CSS (dark-mode) class changes

```
    <div class="parent">
    <Tree class="treeClass" tree={structureTree} let:node>
        {#if node.children}
            <div class="tree-node">{node.name}</div>
        {:else}
            <div class="label-node"><AbilityBug ability={getAbilityBySkill(node.id)}></AbilityBug></div>
        {/if}
    </Tree>
    </div>

<style>
    .tree-node {
        line-height: 1.8;
    }
    :global(body.dark-mode) .parent :global(.treeClass) {
        fill: #bfc2c7;
    }
</style>

```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant