This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

Using styled-components in React/Next Applications




Introduction

On the subject of styling your React software with a css-in-js strategy, styled-components stands out as a best choice. On this submit, I am going to stroll you thru learn how to make the most of styled-components in a Subsequent software. By default, Subsequent supplies a method to make use of css-in-js by styled-jsx. Nevertheless, for those who discover styled-jsx cumbersome as a result of it requires writing CSS inside JSX, which may make your elements lengthier, then styled-components could be the suitable match for you.



Set up of styled-components

npm set up styled-components
// or
yarn add styled-components
Enter fullscreen mode

Exit fullscreen mode

Instance utilization:

import styled from 'styled-components'

const Wrapper = styled.div`
  shade: purple;
  text-align: heart;
`

// Element with enter param
const Wrapper2 = styled.div<{$shade?: string}>`
  shade: ${props => props.$shade};
  text-align: heart;
`

export default operate Index() {
  return (
    <>
      <Wrapper>Demo 1</Wrapper>
      <Wrapper2 $shade="inexperienced">Demo 2</Wrapper2>
    </>
  )
}
Enter fullscreen mode

Exit fullscreen mode



Including Theme Settings

This is learn how to use the ThemeProvider to import a theme to your complete software that may be accessed anyplace, just like utilizing React context.

import {useContext, useMemo} from 'react'
import styled, {ThemeContext, ThemeProvider} from 'styled-components'

const Wrapper = styled.div`
  shade: purple;
  text-align: heart;
`

const Wrappe2 = (shade: string) => styled.div`
  shade: ${shade};
  text-align: heart;
`

const theme = {
  colours: {
    major: '#0070f3',
  },
}

operate Show() {
  const themeContext = useContext(ThemeContext) // get theme context
  console.log('themeContext', themeContext)
  return (
    <>
      <Wrapper>Demo 1</Wrapper>
      <Wrapper2 $shade={themeContext?.colours.major}>Demo 2</Wrapper2>
    </>
  )
}

export default operate Index() {
  return (
    <ThemeProvider theme={theme}>
      <Show />
    </ThemeProvider>
  )
}
Enter fullscreen mode

Exit fullscreen mode



Utilizing within the Subsequent Utility

If you wish to use it in a Subsequent software, merely add the next code snippet to the app/format.tsx file to arrange the format for all pages.

export default operate Index({kids}: {kids: JSX.Component}) {
  return <ThemeProvider theme={theme}>{kids}</ThemeProvider>
}
Enter fullscreen mode

Exit fullscreen mode

Afterwards, in every web page, you possibly can retrieve the theme context as follows:

'use consumer'

import {useContext, useMemo} from 'react'
import styled, {ThemeContext, ThemeProvider} from 'styled-components'

export default operate Index() {
  const themeContext = useContext(ThemeContext) // get theme context
  return (
    <>
      <Wrapper>Demo 1</Wrapper>
      <Wrapper2 $shade={themeContext?.colours.major}>Demo 2</Wrapper2>
    </>
  )
}
Enter fullscreen mode

Exit fullscreen mode



Conclusion

So, now we have efficiently arrange styled-components in React/Subsequent, offering some examples of utilization and learn how to configure utilizing ThemeProvider. Hopefully, this text proves to be useful.

Do not hesitate to go away your ideas within the feedback part, and keep in mind to love, share, and comply with for extra insightful content material sooner or later!

If you happen to discovered this content material useful, please go to the original article on my blog to assist the writer and discover extra fascinating content material.

FacebookX

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?