Skip to content

Commit

Permalink
Merge pull request #1598 from gluestack/ankit-tailor-patch-1
Browse files Browse the repository at this point in the history
Update index.stories.mdx
  • Loading branch information
ankit-tailor authored Jan 10, 2024
2 parents 0ec866e + 774b4d7 commit 44b867c
Showing 1 changed file with 37 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -211,4 +211,41 @@ export const App = () => {
};
```

### Theme specific style

You can apply theme-specific styling by using the . prefix with the theme name. This API is supported in both `styled()` and the `sx` prop.

```tsx
import { styled, StyledProvider, Theme } from '@gluestack-style/react';
import { Pressable } from 'react-native';
import { config } from './config';

const Button = styled(Pressable, {
backgroundColor: '$primary',
padding: '$3',
'.classic': {
backgroundColor: '$secondary'
}
});

const ButtonText = styled(Pressable, {
color: '$secondary',
'.classic': {
color: '$primary'
}
});

export const App = () => {
return (
<StyledProvider config={config}>
<Theme theme="classic">
<Button>
<ButtonText>Classic Button</ButtonText>
</Button>
</Theme>
</StyledProvider>
);
};
```

> **Note**: Components must be wrapped inside the `Theme` component to use the theme. Else default tokens from config will be used.

0 comments on commit 44b867c

Please sign in to comment.