Roblox / roact

A view management library for Roblox Lua similar to React
https://roblox.github.io/roact
Apache License 2.0
563 stars 143 forks source link

Supporting style sheets #192

Open benbrimeyer opened 5 years ago

benbrimeyer commented 5 years ago

Opting for a component-level middleware wrapping components would prove to be cumbersome as every component would need to be wrapped.

Being able to pass a style sheet and mapping to props would help reduce the need for floating constants and would significantly reduce the definitions of components

Roblox instances not being able to accept props that are undefined may prove to be an issue.

https://facebook.github.io/react-native/docs/stylesheet.html

LPGhatguy commented 5 years ago

This feels more difficult than it does for CSS since a lot of properties can't be applied to any old frame. :(

LPGhatguy commented 5 years ago

I've been working in React again and this feature makes a lot of sense to me now!

When working with CSS modules, you usually define your styles out-of-file in CSS, then import them and reference them in your components:

import styles from "./header.module.css";

const Header = ({ siteTitle }) => (
  <header className={ styles.Header }>
    <div className={ styles.HeaderMain }>
      <Logo />
      <Nav />
    </div>
  </header>
);

Like the link in this issue, this helps make your component MUCH more readable. It's still possible to override individual style values with style or with direct props, so you're just getting better defaults.

In addition, I think we can use this as a sweet performance optimization in Roact. If we have a fixed table of styles under a known key, we can skip reconciling all of those properties most of the time!

This also solves the problem of the "better defaults" problem that Roact generally has.

It could look like this:

local DefaultFrame = {
    BorderSizePixel = 0,
    BackgroundColor3 = Color3.new(1, 1, 1),
}

Roact.createElement("Frame", {
    [Roact.Style] = DefaultFrame,
    BackgroundColor3 = Color3.new(1, 0, 1),
})
amatosov-rbx commented 5 years ago

In React-Native stylesheets scenario you can provide an array of styles, nut just a single one. This array is flattened by React-Native and then applied. This allows you to seamlessly combine stylesheets instead of doing overrides of single properties