:zap: Toolkit for component-oriented styling
As Styletron now ships with the useStyletron hook, you need to update your React version to 16.8+.
withStyle
aliased to withStyleDeep
Starting the v5 release, the original withStyle
functionality got replaced with withStyleDeep
. For now, you
can still use withStyle
, but under the hood, it will simply call withStyleDeep
.
$ref
got removedStarting the v5 release, Styletron uses React.forwardRef
. If you used $ref
in your application, you have to update them to ref
.
$style
api addedYou can now directly override styles of any Styletron component without using the withStyle
HoC.
// Static
const Widget = styled("div", {color: "red"});
<Widget $style={{color: "blue"}} />
// result: { color: blue }
// Dynamic
const Widget = styled("div", {color:"red"});
<Widget $style={props => ({color: props.$info ? "blue" : "black"})} $info={true} />
// result: { color: blue }
// $style overrides even the withStyle
const Widget = withStyle(styled("div", {color: "red"}), {color: "yellow"});
<Widget $style={{color: "blue"}} />
// result: { color: blue }