Advanced Styling with Prismane
Tags: webdev, javascript, react, ui
Published: 2023-12-02 17:17:28

## Introduction

Hello, everyone! Welcome to this advanced tutorial on Styling with Prismane. In this tutorial, you will understand how powerful and versatile Prismane’s styling system really is.

Empower your React development with Prismane's comprehensive arsenal of tools: 26+ hooks, 111+ components, and 28+ form validators. Craft seamless forms with Prismane's intuitive form builder. Experience unparalleled performance, as every component is meticulously optimized for speed and efficiency.

All of the code in the example below can be directly accessed through the [GitHub Repository](https://github.com/spleafy/prismane-advanced-styling).

## Styling Components with Prismane

In this section, we will demonstrate how to style components using Prismane. We will cover various styling options, CSS variables, and component-based theming.

### Shorthand Props

Prismane's shorthand props make it easy to quickly style components without writing lengthy CSS rules. This can save you time and effort, and make your code more readable and maintainable. Additionally, Prismane's shorthand props have support for pseudo-classes, at rules and much more.

Instead of lengthy CSS rules, use the shorthand props to effortlessly customize components like the Box without the need for additional CSS.

```css
.PrismaneBox-root {
  padding: 16px !important;
  background: red;
  color: white;
}
```

We can write the following code, which will produce the same output:

```tsx
<Box p={16} bg="red" cl="white" />
```

The `p` prop sets the padding of the button to `16px`

The `bg` prop sets the background of the button to `red`

The `cl` prop sets the color property of the button to `white`

> 💡 All of Prismane’s components support these shorthand props. To learn more about the full list of shorthand props, you can check out this [documentation](https://www.prismane.io/docs/styling/style-props#supported-props).

### Customizing A Button Component

Using the shorthand props that Prismane exposes, you can craft a new component, tailor the Button component to your preferences, and reuse it by following these steps:

```tsx
import { Button, ButtonProps } from "@prismane/core";

const NewButton = ({ children, ...props }: ButtonProps) => {
  return (
    <Button px={18} py={12} br={0} {...props}>
      {children}
    </Button>
  );
};

export default NewButton;
```

The `px` prop sets the horizontal padding of the button to `18px`

The `py` prop sets the vertical padding of the button to `12px`

The `br` prop sets the border-radius property of the button to `0`

> 💡 We are using the `ButtonProps` type from Prismane’s `Button` component. This way we are ensuring that the new component still has TypeScript support.

Following these steps, you have created a fully customized `NewButton` component that still has all of the functionality of the `Button` component.

Let’s see the result


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/314k2bhpykbaya6m2cgs.png)

### Pseudo Classes

All of Prismane’s shorthand props have support for pseudo-classes. To fully understand all of Prismane’s shorthand props’ features, check out this [tutorial](https://www.prismane.io/docs/styling/style-props).

To add a pseudo-class value, we need to pass an array to the shorthand prop. The first value of the array is the normal value, the second value of the array is an object whose keys are the names of the pseudo-classes, and it’s values are the respected values when the pseudo-class is active. 

To easily understand how they work, let’s change the background of our button and change it once again on hover. This can be done as follows:

```tsx
import { Button, ButtonProps } from "@prismane/core";

const NewButton = ({ children, ...props }: ButtonProps) => {
  return (
    <Button
      px={18}
      py={12}
      br={0}
      bg={["#40e495", { hover: "#2bb673" }]}
      {...props}
    >
      {children}
    </Button>
  );
};

export default NewButton;
```

This results in:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8t5uh1wyj0r0zgppp63.gif)

### CSS Global Style Customization

All of Prismane's components have CSS classes for each of their layers, classes that are toggled by props, and classes that represent given prop values. This makes it easy to integrate Prismane components with your existing CSS styles.

Let’s use this `App.tsx` starter code and work our way through customizing our buttons globally.

```tsx
import { Center, Button } from "@prismane/core";

function App() {
  return (
    <Center w="100vw" h="100vh" direction="column" gap={8}>
      <Button>Primary Button</Button>
      <Button variant="secondary" color="base">Secondary Button</Button>
    </Center>
  );
}

export default App;
```

This will render the following:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4ewpvuljf0l3emrmb31.png)

Now, we are going to use the `Button` component’s prebuilt classes to style our two buttons. You can find the full list of CSS classes that the `Button` component has in the [Button API page](https://www.prismane.io/docs/components-api/button-api).

> 💡 You can find the full list of CSS classes of any component by choosing the component from the [Overview page](https://www.prismane.io/docs/components-api/getting-started).

Let’s make our buttons round by default. To do that, we can use the  `.PrismaneButton-root` class that every Button component has. This class targets the root element of our `Button` which is the `button` element.

```css
.PrismaneButton-root {
  border-radius: 9999px !important;
}
```

Let’s see the result


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bf55b4rn3s56bcojhbsl.png)

Great! Now, let’s add a `linear-gradient` to our primary button only. To do that, we can use the `.PrismaneButton-{variant}` class that Prismane exposes. Since we want to target only the buttons that have the `primary` variant, we are going to use this class - `.PrismaneButton-primary`

```css
.PrismaneButton-primary {
  background: linear-gradient(to right, #11998e, #38ef7d) !important;
}
```

Let’s see the changes:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e82dl7dpize13b9dl4rf.png)

## CSS Theme Variables

Prismane converts the Theme Object to CSS variables, which enables you to integrate them into your CSS Stylesheet.

**CSS Theme Variables:**

Primary Colors:

`—prismane-colors-primary-50`, 

`—prismane-colors-primary-100`,

`—prismane-colors-primary-200`,

`—prismane-colors-primary-300`,

`—prismane-colors-primary-400`,

`—prismane-colors-primary-500`,

`—prismane-colors-primary-600`,

`—prismane-colors-primary-700`,

`—prismane-colors-primary-800`,

`—prismane-colors-primary-900`,

Base Colors:

`—prismane-colors-base-50`,

`—prismane-colors-base-100`,

`—prismane-colors-base-200`, 

`—prismane-colors-base-300`,

`—prismane-colors-base-400`,

`—prismane-colors-base-500`,

`—prismane-colors-base-600`,

`—prismane-colors-base-700`,

`—prismane-colors-base-800`,

`—prismane-colors-base-900`,

Border Radius:

`—prismane-border-radius-xs`,

`—prismane-border-radius-sm`,

`—prismane-border-radius-base`,

`—prismane-border-radius-md`,

`—prismane-border-radius-lg`,

`—prismane-border-radius-xl`,

`—prismane-border-radius-2xl`,

Spacing:

`—prismane-spacing`,

Now, let’s customize our primary button gradient to use the primary theme colors:

```css
.PrismaneButton-primary {
  background: linear-gradient(
    to right,
    rgb(var(--prismane-colors-primary-700)),
    rgb(var(--prismane-colors-primary-400))
  ) !important;
}
```

Let’s see the final result:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hm8v3e5hdq7heqayck6x.png)

That is awesome! You are now a pro Prismane developer!

## Thank you for reading!

> Feel free to connect with us on [Twitter](https://twitter.com/prismaneui), [GitHub](https://github.com/prismaneui/prismane), Reddit
> 
> 
> You can support us through [Contributing](https://github.com/orgs/prismaneui/discussions/new/choose) and [OpenCollective](https://opencollective.com/prismane/).
> 
> *Check out our [website](https://www.prismane.io/) for more in detail information.*
>