Supporting style sheets

[benbrimeyer]

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]

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

[LPGhatguy]

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]

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