Skip to main content

Styled Components

Note:
We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our Contact Page.

Before starting, be sure to complete the Create Abyss App tutorial.

Step 1: Create a Styled Page​

In Visual Studio Code, open my-new-app project. From here, navigate into products/web/src/routes, and create a new folder, name "StyledPage". Within this new folder, we'll be creating two new files, named "index.ts" and "StyledPage.tsx".

Remember to connect your page to the router in products/web/src/routes/Routes.tsx by including a new Route shown below:

<Router.Route path="/styled-page" element={<StyledPage />} />

You may reference the Page Routing tutorial for more information on creating pages.

Step 2: Creating Styled Components​

You can use the styled tool to style html elements. It uses JSS to create CSS classes within JavaScript. Styling can consist of changing a component's font, color, size, padding, and spacing, etc. If you are curious to learn more about other options, check out styled.

In your StyledPage.tsx file, add the following import statements:

import React from 'react';
import { styled } from '@uhg-abyss/web/tools/styled';
import { Text } from '@uhg-abyss/web/ui/Text';
import { Layout } from '@uhg-abyss/web/ui/Layout';
import { IconBrand } from '@uhg-abyss/web/ui/IconBrand';

We will create an information box to demonstrate how to use styled.

After your import statements, insert the following code:

const StyledContainer = styled('div', {
  padding: '$web.semantic.spacing.scale.xl',
});


const StyledBox = styled('div', {
  display: 'inline-block',
  borderWidth: '$web.semantic.border-width.container',
  borderStyle: 'solid',
  borderColor: '$web.semantic.color.border.status.saturated.info',
  borderRadius: '$web.semantic.border-radius.container.large',
  paddingTop: '$web.semantic.spacing.scale.sm',
  paddingRight: '$web.semantic.spacing.scale.lg',
  paddingBottom: '$web.semantic.spacing.scale.sm',
  paddingLeft: '$web.semantic.spacing.scale.lg',
  backgroundColor: '$web.semantic.color.surface.container.status.info.tint',
});


const StyledIcon = styled(IconBrand, {
  borderWidth: '$web.semantic.border-width.container',
  borderStyle: 'solid',
  borderColor: '$web.semantic.color.border.status.saturated.info',
  borderRadius: '$web.semantic.border-radius.container.round',
});

Step 3: Rendering Styled Components​

In your StyledPage.tsx file, add following code below to your StyledPage component:

export const StyledPage = () => {
  return (
    <StyledContainer>
      <StyledBox>
        <Layout.Group>
          <StyledIcon icon="cost" variant="twotonelightcircle" brand="uhc" />
          Average cost in your area: <Text fontWeight="bold">$980</Text>
        </Layout.Group>
      </StyledBox>
    </StyledContainer>
  );
};

This component uses the StyledBox and StyledContainer components we created previously. There are other features on the styled page to customize and edit your components to best fit your product's custom designs.

Step 4: Viewing Styled Components​

At the end of this tutorial, your code in your StyledPage.tsx file should look like this:

import React from 'react';
import { styled } from '@uhg-abyss/web/tools/styled';
import { Text } from '@uhg-abyss/web/ui/Text';
import { Layout } from '@uhg-abyss/web/ui/Layout';
import { IconBrand } from '@uhg-abyss/web/ui/IconBrand';


const StyledContainer = styled('div', {
  padding: '$web.semantic.spacing.scale.xl',
});


const StyledBox = styled('div', {
  display: 'inline-block',
  borderWidth: '$web.semantic.border-width.container',
  borderStyle: 'solid',
  borderColor: '$web.semantic.color.border.status.saturated.info',
  borderRadius: '$web.semantic.border-radius.container.large',
  paddingTop: '$web.semantic.spacing.scale.sm',
  paddingRight: '$web.semantic.spacing.scale.lg',
  paddingBottom: '$web.semantic.spacing.scale.sm',
  paddingLeft: '$web.semantic.spacing.scale.lg',
  backgroundColor: '$web.semantic.color.surface.container.status.info.tint',
});


const StyledIcon = styled(IconBrand, {
  borderWidth: '$web.semantic.border-width.container',
  borderStyle: 'solid',
  borderColor: '$web.semantic.color.border.status.saturated.info',
  borderRadius: '$web.semantic.border-radius.container.round',
});


export const StyledPage = () => {
  return (
    <StyledContainer>
      <StyledBox>
        <Layout.Group>
          <StyledIcon icon="cost" variant="twotonelightcircle" brand="uhc" />
          Average cost in your area: <Text fontWeight="bold">$980</Text>
        </Layout.Group>
      </StyledBox>
    </StyledContainer>
  );
};

In your browser, your StyledPage should look like this:


Great job, you have successfully styled components!

Table of Contents