Is there a way to share styles between components

[serge-hulne]

...to avoid repeating styles definitions, as in:

component Counter {
  state val = 1

  fun render : Html {
    <div::centered>
      <button onClick={handleIncrement}>
        "Click Me!"
      </button>

      <br/>
      <{ Number.toString(val) }>
    </div>
  }

  fun handleIncrement : Promise(Void) {
    let value =
      await `window.increment({addValue: 1, multiplier: 2})
        .then(value => value.count)
        .catch(error => console.log(error))`

    `window.logGo("test")`

    next { val: value }
  }

  style centered {
    justify-content: center;
    padding: 5px;
    flex-direction: column;
    align-items: center;
    display: flex;
    font-family: "Open Sans";
    font-weight: bold;
  }
}

component Menu {
  property selectedOption : String = ""
  property handleSelect : Function(Html.Event, Promise(Void))

  fun render : Html {
    <div>
      <select onChange={handleSelect}>
        <option value="">
          "Menu"
        </option>

        <option value="Home">
          "Home"
        </option>

        <option value="counter">
          "Counter"
        </option>
      </select>

      <div::centered>
        <h2>
          <{ selectedOption }>
        </h2>
      </div>
    </div>
  }

  style centered {
    justify-content: center;
    padding: 5px;
    flex-direction: column;
    align-items: center;
    display: flex;
    font-family: "Open Sans";
    font-weight: bold;
  }
}

[gdotdesign]

Hi 👋 (and thanks for opening a discussion instead of an issue 🙏)

There are no global styles in Mint. You can create a Centered component to dry things up:

component Centered {
  property children : Array(Html) = []

  style root {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    display: flex;
    padding: 5px;

    font-family: "Open Sans";
    font-weight: bold;
  }
  
  fun render : Html {
    <div::root>
      <{ children }>
    </div>
  }
}

Then use it later:

<Centered>
  <button onClick={handleIncrement}>
    "Click Me!"
  </button>

  <br/>
  <{ Number.toString(val) }>
</Centered>

[serge-hulne]

Thank you!