styles

As a developer using Supertokens, you can modify the styles of any components in the EmailPassword.init method.

In order to give users this flexibility, you need to follow some guidelines while creating new components in this library or developing new themes.

Let's take the default theme as an example to illustrate those guidelines:

When a developer wants to modify a component following. the docs, here is what happens under the hoods:

• the raw style object provided by the user is stored into EmailPassword recipe configs (under signInForm or signUpForm attribute).
• When a user goes to /auth, component is rendered. It wraps the SignIn component in a StyleContext component. The StyleContext takes the following props:
• defaultPalette: Default Palette for current theme (default theme)
• styleFromInit: Style provided by the end user.
• getDefaultStyles: Default style method for current theme (default theme) which takes the palette as an argument and returns a style object.
• children: Component that will be able to use the styles provided by the StyleContext.

The StyleContext does the following:

• Merge the default palette with the user provided palette.
• Use the new palette and the default style method to create the default style object.
• Merge the user provided styles with the default style object.
• Pass the result style object to the value of the StyleContext.Provider
• Render the children object in the StyleContext.

Any component wrapped inside this StyleContext will be able to use this style object thanks to the useContext object.

• Example in a Functional component
• Example in a Class Component:
  • 1/ Define a static contextStyle
  • 2/ Use the contextStyle in render method

Now, let's take a look at the button component used to submit any forms:

• First we need to import jsx (with the comment!!!) https://github.com/supertokens/supertokens-auth-react/blob/30239e822e5208b9d170ffd7db64b6a817ad0162/lib/ts/recipe/emailpassword/components/library/button.tsx#L20 from @emotion/core
• Then, we add the css={styles.button} attribute to the HTML Tag https://github.com/supertokens/supertokens-auth-react/blob/30239e822e5208b9d170ffd7db64b6a817ad0162/lib/ts/recipe/emailpassword/components/library/button.tsx#L51
• If we stop here, here is what it will look like in the browser inspector:

   <button type="submit" class="css-16h82en">SIGN IN</button>

This does not give any information to the end user on which style they can overwrite. A rule when using styles defined in the StyleContext is to always add a corresponding className: className="button" . That way, the above is transformed into:

<button type="submit" class="button css-16h82en">SIGN IN</button>

The end user knows they have to overwrite button style in the EmailPassword config.

Please read React context docs for more information on how React context works and check out emotion docs for more information on styling with React components.