React Styled Components | Scrimba | Page 1

lilac garden Jan 5, 2023, 9:27 AM

#

You can use css function from styled components and define your styles with it. This will create a CSS class (as far as I remember) which can be be used anywhere in your application.

const sharedBtnStyles = css`
  // css definiton
`

const Button1 = styled.button`
  ${sharedBtnStyles}
`

const Button2 = styled.button`
  ${sharedBtnStyles}
`

Reference if needed: https://styled-components.com/docs/api#css

You can also define a common button for your applications, then you could also target that button's css in your main container:

const Button = styled.button`
  color: red;
  background: blue;
`

const MainContainer = styled.div`
  & ${Button} {
    color: purple;
    background: yellow;
  }
`

rotund lake Jan 5, 2023, 3:10 PM

#

lilac garden You can use `css` function from styled components and define your styles with i...

Wow! Very useful. Thanks.

lilac garden Jan 5, 2023, 4:09 PM

#

me pleasure 🙂

rotund lake Jan 19, 2023, 8:32 AM

#

Hi guys supposedly you have a button component created in react styled components. You style it using various styles eg give it a padding and border radius and it also takes in a prop. Let's call this button1

And then later on you want to place a button(let's call this button2) which has different styles entirely from the button1 which you created before, what do you do? Do you create another button component or you can reuse the one created earlier, if it's the latter how do you go about it? Thanks in advance.

lament pilot Jan 19, 2023, 8:50 AM

#

I generally wouldn't advise styled-components be used

#

There's a lot of better options

#

Tailwind, Vanilla extract, Unocss, Postcss

rotund lake Jan 19, 2023, 8:54 AM

#

lament pilot I generally wouldn't advise styled-components be used

So you are suggesting I switch mid project?

lament pilot Jan 19, 2023, 8:54 AM

#

rotund lake So you are suggesting I switch mid project?

i would reuse it

#

variants

rotund lake Jan 19, 2023, 8:55 AM

#

lament pilot i would reuse it

How??

lament pilot Jan 19, 2023, 8:57 AM

#

rotund lake How??

import styled, { css, DefaultTheme } from 'styled-components';

const variantStyles = (theme: DefaultTheme, variant = 'primary') =>
  ({
    primary: css`
      color: ${theme.colors.light};
      background: ${theme.colors.primary};
      border: 1px solid ${theme.colors.primary};
    `,
  }[variant]);

const Button = styled.button<{ variant: string }>`
  padding: 1rem;
  font-size: 0.875rem;
  transition: all 0.3s;
  cursor: pointer;

  ${({ theme, variant }) => variantStyles(theme, variant)}

  &:active {
    transform: translateY(1.5px);
  }
`;

export default Button;

This is an example

#

Then you can do this

<Button variant="primary">
  Start Learning
</Button>

#

const variantStyles = (theme: DefaultTheme, variant = 'primary') =>
  ({
    primary: css`
      color: ${theme.colors.light};
      background: ${theme.colors.primary};
      border: 1px solid ${theme.colors.primary};
    `,
    secondary: css`
      ...
    `,
    etcetera: css``,
    ...
  }[variant]);

rotund lake Jan 19, 2023, 9:02 AM

#

lament pilot ```ts const variantStyles = (theme: DefaultTheme, variant = 'primary') => ({ ...

Thanks @lament pilot I'll try it out.

#

Why would you use tailwind css instead of styled components?

lament pilot Jan 19, 2023, 9:03 AM

#

rotund lake Why would you use tailwind css instead of styled components?

welp my biggest concern is naming

#

with tailwind i just write what it looks like

#

with styled-components i have to name something

#

then you end up with Button1 Button2

#

another thing is, tailwind is just fast to write once you get it, its like the vim of css

#

and the default styles of tailwind are amazing, really some good color palettes and sizing units, its just tailored with presets by a genius

rotund lake Jan 19, 2023, 9:10 AM

#

lament pilot and the default styles of tailwind are amazing, really some good color palettes ...

You forget that it makes the code look bloated. If you have a div that has 10 css rules it becomes unreadable.

In terms of naming with styled components it's easy. That button I have is called "styled button". I just have to put "styled" before the actual element.

Another thing I hate with tailwind is that there are several steps of configuration before you can use it. With styled components you just import and you good to go.

lament pilot Jan 19, 2023, 9:11 AM

#

it becomes unreadable.
for me, no, it's a hump to get over for sure but i dont find it obstructing, also theres extensions to hide the classname when not focusing on the element

several steps of configuration before you can use it
meh, install, init, copy paste config, good to go

rotund lake Jan 19, 2023, 9:30 AM

#

lament pilot ```tsx import styled, { css, DefaultTheme } from 'styled-components'; const var...

In this part the DefaultTheme is underlined in red and string is not defined.

lament pilot Jan 19, 2023, 9:30 AM

#

string is a type lol

#

if you're not a chad and not using typescript just remove the type

#

so just normal style.button``

rotund lake Jan 19, 2023, 9:32 AM

#

lament pilot if you're not a chad and not using typescript just remove the type

I was wondering. I am using plain react. No typescript

#

What about the default Theme in const variantStyles. It's underlined in red still

lament pilot Jan 19, 2023, 9:39 AM

#

rotund lake What about the default Theme in const variantStyles. It's underlined in red stil...

also a type

rotund lake Jan 19, 2023, 9:41 AM

#

So in short i should just import css and styled from styled components??

lament pilot Jan 19, 2023, 9:41 AM

#

yh

rotund lake Jan 19, 2023, 10:00 AM

#

Take a look @lament pilot it's not working. What am I missing??

lament pilot Jan 19, 2023, 10:01 AM

#

rotund lake Take a look <@238234312942551040> it's not working. What am I missing??

Missing
${({ theme, variant }) => variantStyles(theme, variant)}

rotund lake Jan 19, 2023, 10:10 AM

#

rotund lake Take a look <@238234312942551040> it's not working. What am I missing??

What you are saying I am missing is inside the variable called TestButton.

lament pilot Jan 19, 2023, 10:24 AM

#

rotund lake What you are saying I am missing is inside the variable called TestButton.

oh wait no you have set it right

#

it is working

#

you just havent passed variant

rotund lake Jan 19, 2023, 11:26 AM

#

lament pilot you just havent passed variant

Where have I not passed it?

lament pilot Jan 19, 2023, 11:26 AM

#

rotund lake Where have I not passed it?

on the styled component

#

oh wait no you have

#

confus

#

never use images for code lol

rotund lake Jan 19, 2023, 11:27 AM

#

lament pilot never use images for code lol

Got it.

#

So why is it not working?

lament pilot Jan 19, 2023, 11:30 AM

#

oh i see why lol

#

(theme, variant = "primary")

#

Set the params of variants to that

#

It's taking your theme as the first one, and theme isn't "primary" so it doesn't know wtf to do

#

This would've been avoided with typescript

rotund lake Jan 19, 2023, 11:41 AM

#

import React from "react";
import styled, { css } from "styled-components";


// below is your suggestion
const variantStyles = (variant = "primary") =>
  ({
    primary: css`
      color: white;
      background: black;
    `,
  }[variant]);

export const TestButton = styled.button`
  padding: 11rem;
  
  font-size: 2rem;
  cursor: pointer;
  ${({ theme, variant }) => variantStyles(theme, variant)}
  &:active {
    transform: translateY(1.5px);
  }
`;

// below is my original code

const Button = (props) => {
  return (
    <>
      <StyledButton color={props.color}>{props.title}</StyledButton>
    </>
  );
};

const StyledButton = styled.button`
  border-radius: 30px;
  padding: 15px 30px;
  color: ${({ theme }) => theme.colors.gray};
  background-color: ${({ theme }) => theme.colors.brandColor};
  cursor: pointer;
  border: none;
  font-size: 15px;
  font-weight: 500;
  font-family: "Merriweather";

  &:hover {
    color: ${({ theme }) => theme.colors.brandColor};
    background-color: ${({ theme }) => theme.colors.white};
    transition: all 0.5s ease-in-out;
  }

  @media screen and (max-width: ${({ theme }) => theme.mobile}) {
    display: none;
  }
`;
export default Button;

#

Header js

import React from "react";
import styled from "styled-components";
import Image1 from "../images/iLander-Logo.png";
import Button from "./Button";
import TestButton from "./Button";

const Header = () => {
  return (
    <StyledHeader>
      <StyledLogo src={Image1} alt="logo" />
      <Button title="Get Started" />
      <TestButton title="test" variant="primary" />
    </StyledHeader>
  );
};

const StyledHeader = styled.header`
  padding: 20px 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
  background-color: red;
`;

const StyledLogo = styled.img`
  font-size: 2rem;
`;


export default Header;

lament pilot Jan 19, 2023, 11:42 AM

#

just add theme

#

or remove it if you wont ever need it

#

Either

const variantStyles = (theme, variant = "primary") =>
  ({
    primary: css`
      color: white;
      background: black;
    `,
  }[variant]);

Or

${({ variant }) => variantStyles(variant)}

rotund lake Jan 19, 2023, 11:57 AM

#

On your end you say it's working??

#

None of this is working

lament pilot Jan 19, 2023, 12:18 PM

#

Works for me

#

What does it mean when you say it isn’t working lol

#

Like what happens

#

@rotund lake

rotund lake Jan 19, 2023, 1:17 PM

#

Copy the code please.

#

I have been coding from morning. My mind might as well be tired.

rotund lake Jan 19, 2023, 1:18 PM

#

lament pilot Like what happens

It just displays the normal color I had set before I asked the question.

lament pilot Jan 19, 2023, 1:20 PM

#

rotund lake Copy the code please.

import "./styles.css";
import styled, { css } from "styled-components";

const variants = (theme, variant = "primary") =>
  ({
    primary: css`
      font-size: 2rem;
    `,
    secondary: css`
      font-size: 1rem;
    `
  }[variant]);

const Title = styled.h1`
  ${({ theme, variant }) => variants(theme, variant)}
`;

export default function App() {
  return (
    <div className="App">
      <Title variant="primary">Hello</Title>
      <Title variant="secondary">Hello again</Title>
    </div>
  );
}

#

That's an example.

rotund lake Jan 20, 2023, 8:33 AM

#

Where is this theme coming from in const variants??

#

Is the const variants supposed to be exported??

lament pilot Jan 20, 2023, 11:43 AM

#

rotund lake Where is this theme coming from in const variants??

styled components

rotund lake Jan 21, 2023, 3:19 AM

#

lament pilot styled components

You know in my app.js there is a theme provider that takes in theme. And the theme is an object that has colors and mobile size width. So I am wondering is this the same theme ?

rotund lake Jan 21, 2023, 5:13 AM

#

Greetings @lament pilot what you showed me works perfectly with text. I would like it to work with buttons too. First of all I would like you to look at my app.js file. It seems there is some confusion about where "theme " is coming from. Below is App.js ```jsx
import { ThemeProvider } from "styled-components";
import { GlobalStyles } from "./styles/Global";
import GlobalFonts from './fonts/fonts'
import Header from "./components/Header";
import HeroSection from "./components/HeroSection";

const theme = {
colors: {
blackMain: '#0E1133',
blackLight: '#505056',
gray: '#E7EAEF',
brandColor: '#FF3E66',
white: '#EEF1F6',
},
mobile: '800px'
}

function App() {
return (
<ThemeProvider theme={theme}>
<>
<GlobalStyles />
<GlobalFonts />
<Header />
<HeroSection/>
</>
</ThemeProvider>
);
}
export default App;

#

I tried what worked with texts but with buttons but it isn't working. Below is my button component. I have imported the button to two different components. Header and Hero section```jsx
import React from "react";
import styled, { css } from "styled-components";

const variants = (theme, variant = "primary") =>
({
primary: css border-radius: 30px; padding: 15px 30px; color: green; background-color: black; cursor: pointer; border: none; font-size: 15px; font-weight: 500; font-family: "Merriweather"; ,
secondary: css border-radius: 30px; padding: 15px 30px; color: orange; background-color: black; cursor: pointer; border: none; font-size: 30px; font-weight: 500; font-family: "Oswald"; ,
}[variant]);

// export const Title = styled.h1// ${({ theme, variant }) => variants(theme, variant)} //;

const Button = (props) => {
return (
<>
<StyledButton color={props.color}>{props.title}</StyledButton>

</>

);
};

@media screen and (max-width: ${({ theme }) => theme.mobile}) {
display: none;
}
`;
export default Button;

#

Here is what the button looks like in Hero section ```jsx
import React from "react";
import styled from "styled-components";
import Image1 from "../images/hero-thumb-3.png";
import Button from "./Button";
const HeroSection = () => {
return (
<>
<StyledHeroSection>
<StyledHeroHeading1>14 Day Free</StyledHeroHeading1>
<HeroImage src={Image1} />
<StyledHeroHeading2>
Ready to launch <br /> your app in one <br /> Application.
<br />
<Button variant="secondary" title="Testing" />
</StyledHeroHeading2>
<StyledHeroParagraph>
Find the best application in the iLander.
</StyledHeroParagraph>
</StyledHeroSection>
</>
);
};
const StyledHeroSection = styled.div`
background-color: ${({ theme }) => theme.colors.white};

padding: 10rem;
`;

const HeroImage = styled.img position: absolute; background-position: bottom right; width: 48%; right: 0; bottom: 0;;

export default HeroSection;

#

And here is what the button looks like in header section. ```jsx
import React from "react";
import styled from "styled-components";
import Image1 from "../images/iLander-Logo.png";
import Button from "./Button";

const Header = () => {
return (
<StyledHeader>
<StyledLogo src={Image1} alt="logo" />
<Button variant="primary" title="Get Started" />
</StyledHeader>
);
};

const StyledHeader = styled.header padding: 20px 15px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; z-index: 5; background-color: red;;

const StyledLogo = styled.img font-size: 2rem;;

export default Header;

#

Secondary button should have a font size of 30px and color of Orange, which is different from primary which a color of green and it's 15px has . But when I change the primary css styles it changes for secondary too. Please assist.

#

This is how it looks in the browser. Like I said they should vary, both buttons should have different fonts and colors but they don't

lament pilot Jan 21, 2023, 10:39 AM

#

Idk at this point I hate styled components and you’re proving my case 😂

#React Styled Components