diff --git a/README.md b/README.md
index dc79cf3..cfa4798 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@
- Breakpoints as objects
- User defined theme support
- Shorthands (`m` for `margin`, `paddingX` for `paddingLeft` and `paddingRight`...)
+- State handling (hover, focused, pressed) with child support
- Atomic CSS generation
- Automatic vendor prefixing
- SSR support
@@ -37,9 +38,17 @@ const ColoredDiv = ({ color }: { color: string }) => {
height: { xs: "13%", lg: "25%" },
paddingX: (theme) => theme.spaccing,
m: 1,
+ focus: {
+ self: {
+ bg: "green",
+ },
+ text: {
+ color: "black",
+ },
+ }
})}
>
-
Text inside the colored div.
+ Text inside the colored div.
);
};
@@ -62,9 +71,17 @@ const ColoredBox = ({ color }: { color: string }) => {
height: { xs: "13%", lg: "25%" },
paddingX: (theme) => theme.spaccing,
m: 1,
+ focus: {
+ self: {
+ bg: "green",
+ },
+ text: {
+ color: "black",
+ },
+ }
})}
>
- Text inside the colored box.
+ Text inside the colored div.
);
};
@@ -336,8 +353,10 @@ The first parameter is a css object, in react web that means a dictionary of css
a `ViewStyle`, a `TextStyle` or an `ImageStyle`. Yoshiki will unsure type safety by returning the style object needed
for your arguments.
-The css object can also take the keys `hover`, `focus` and `press`, and it will apply the style object given as a value
-to the object only when it should.
+The css object can also take the keys `hover`, `focus` and `press`. Thoses keys should be filled with a dictionary of
+keys and style properties. You can then use thoses keys on a child component by putting it as a string in the `css`
+call. Yoshiki will apply the style object to the object only when it should. You can also use the special value `self`
+to directly theme the component that defines the state.
The leftover parameter is here to allow your component to be customized by yoshiki. See [Customize your own components](#customize-your-own-components)
for more details.