menu

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

Convert Css into Styled-Components ?

March 18, 2019 at 12:37pm

Convert Css into Styled-Components ?

March 18, 2019 at 12:37pm (Edited 1 month ago)

Hello, I am still confusing how to convert css into styled-components. something like this:

.container:hover .front, .container:hover .back{

-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

}

and

.front, .back{

background-size: cover;

background-position: center;

-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); }

meanwhile there are another .back and .front class block-scope in the same file.

Can anyone give me some enlightenment about these case? Thank you


March 18, 2019 at 1:04pm

For Gatsbyjs, I prefer to use typography.js and one of its themes as a global style, then use SC to tweak per component settings.

  • reply
  • like

no, it's not about theming nor gatsby. I'm just trying to convert CSS into Styled-Component and some syntax above that i'm still don't understand how to convert it. I'm using CRA for learning purpose.

  • reply
  • like

@alfieqashwa what exactly do you want to convert? a component itself or the whole styles?

If a component. Let say I want to transform that into a styled component. I would go using your example

import { styled } from 'styled-components';
const StyledContainer = styled.div`
background-size: cover;
background-position: center;
:hover {
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
const Container = () => ( <StyledContainer />);
export default Container;
Edited
  • reply
  • like

all depends of course what you are trying to do: Hope this helps :)

  • reply
  • like

@alfieqashwa what exactly do you want to convert? a component itself or the whole styles?

If a component. Let say I want to transform that into a styled component. I would go using your example

import { styled } from 'styled-components';
const StyledContainer = styled.div`
background-size: cover;
background-position: center;
:hover {
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
const Container = () => ( <StyledContainer />);
export default Container;

yeah I understand that. But, what if the case like this:

.container:hover .front, .container:hover .back{ ...... ...... }

where there are class .container, .front, .back and hover it ??

Edited
  • reply
  • like

this is the exact case where I want to convert it into Styled-Components:

https://codepen.io/tyrellrummage/pen/wqGgLO

  • reply
  • like

it works exactly fine when I'm using { createGlobalStyle }. But, for purpose of learning, there are css syntax where I need to understand how to convert it into partial styled-components. In this case (link codepen):

I'm confusing to create Container, Front, Back, and Inner styled-components.

Thanks for the response.

  • reply
  • like

where you put the .front and .back you can interpolate styled components themselves, so the rule would be :hover { ${Front},${Back} { ... } }

  • reply
  • like

where you put the .front and .back you can interpolate styled components themselves, so the rule would be :hover { ${Front},${Back} { ... } }

it's still blur. But I'll try to figure out.

I create sandbox, but still stuck!

https://codesandbox.io/s/jv7qn4v9ky

  • reply
  • like
  • reply
  • like