Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there a way for variants to inherit properties from default style? #1038

Open
jack1913 opened this issue Oct 24, 2020 · 1 comment
Open

Comments

@jack1913
Copy link

Look at this example:

forms: {
    input: {
      color: 'primary',
      px: 3,
      py: 3,
      roundedTop: {
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
      },
      roundedBottom: {
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
      },
    },
  },

I have defined the default styles, there is a radii: 12px, and with variants I would like to modify the default values to nullify the radius as needed.

I have looked over the docs but did not find anything. :/

@Howard86
Copy link

Howard86 commented Nov 1, 2020

As Rebass is based on styled-system
I have found this in the doc which may be helpful.

An example I am currently using is

const theme = {
  colors: {
    primary: "",
    secondary: "",
    terraCotta: ["#E07A5F", "#43190D", "..."],
  },

theme.colors.primary = theme.colors.terraCotta[0];
theme.colors.secondary = theme.colors.terraCotta[1];

(I need to declare the primary & secondary for TypeScript)

so as for your usage, I guess it would be something similar to the following...

theme.forms.input.[your_choice] = {
    [some_options_to_do_with_border_radius]: theme.radii
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants