Using styled components in Frontastic components

Frontastic gives you all the freedom how you want to develop your frontend. While Frontastic starter componentsFrontastic starter components - Frontastic components that come with each Frontastic project that can be copied into your own project to use. Known in code as `boost theme`. are using TailwindCSS and a small pattern library, you don't have to follow this when writing your own components. You can decide with your team what's most efficient for all of you and go that way.

You could even use multiple approaches in a single project, but it's probably not the best idea as it'll increase your bundle size as well as decrease team performance. If a team member normally uses CSS Modules but then has to work with styled components in another Frontastic component, their performance will obviously drop.

In this article, we'll look at using styled components with Frontastic. This is just 1 of the available libraries out there supporting this approach, but this should also give you a general idea of how to approach this with Frontastic.

Using styled components

So, how would you get styled components working with Frontastic? If you follow their documentation, the 1st step is to install the library. As Frontastic uses Yarn, you can run the following command in your project root folder:

yarn add styled-components

The next step is to convert a Frontastic component to use styled components. To do this, create a new Frontastic component (see full steps to create a Frontastic component) or if you're using the Frontastic CLI, you can run the below command:

frontastic generate tastic

See Frontastic CLI generate command article for more information.

After adding the new component to a page in the Frontastic studio (see creating a Frontastic component in the Frontastic studio), you can now develop the component and style it using styled components.

Let's start with this very simple component which echoes the configured header text:

import React from 'react'
import PropTypes from 'prop-types'

import tastify from '@frontastic/catwalk/src/js/helper/tastify'
    
function StyledComponentTastic ({ data }) {
    return <div>
        {data.header}
    </div>
}
    
StyledComponentTastic.propTypes = {
    data: PropTypes.object.isRequired,
}
    
StyledComponentTastic.defaultProps = {}
    
export default tastify({ translate: true })(StyledComponentTastic)

For now, it looks very simple as it's entirely unstyled:

So let's apply some styles to the component:

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

import tastify from '@frontastic/catwalk/src/js/helper/tastify'
 
const Header = styled.div`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`

function StyledComponentTastic ({ data }) {
    return <Header>{data.header}</Header>
}
    
StyledComponentTastic.propTypes = {
    data: PropTypes.object.isRequired,
}
StyledComponentTastic.defaultProps = {}
    
export default tastify({ translate: true })(StyledComponentTastic)

These styles are immediately applied and will just work:

Besides the very basic styles used here, you can unleash the full power of styled components – see their tutorials and documentation for more details. There are globally available theme settings in every Frontastic project, which you might want to use. If this is added to the example, it could look like this:

/* … */
import settings from '../../settings'
 
const Header = styled.div`
    font-size: 1.5em;
    text-align: center;
    color: ${props => (props.color || settings.themeColorsPrimary500)};
`

function StyledComponentTastic ({ data }) {
    return <>
        <Header>{data.header}</Header>
        <Header color="red">{data.header}</Header>
    </>
}
/* … */

And by doing this, the theme color is used or you can even inject a different color into the styled component:

Use styled components is just 1 way of implementing your commerce site and your Frontastic components. And you can do this just like in any other frontend project.


Did this page help you?