Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series







yours forever

Become a Pro and unlock everything




per month

Building Design Utilities

In this video, we’ll be diving into some more utilities and learning how to set up a system that is going to be helpful. I’ll show you how to simplify CSS and how to add different utilities that you can reuse in your projects later.


Become a pro to download code and videos


User avatar


almost 3 years ago [edited]

I found that in order not to pass the empty object to the functions transition / absolute, the object can have a default value which will be an empty object.


export default ({ property = 'all', length = '0.3s', ease = 'ease' } = {}) => `
   transition: ${property} ${length} ${ease}


export const Card = styled.div`
   background: white;
   border-radius: 5px;
   padding: 15px;
   color: ${black};
   &:hover {

I hope it can help.

User avatar


about 3 years ago [edited]

@George thanks! Was stuck on that too.

Can't seem to get my transition to work. On hover only causes the shadow to update immediately. Any thoughts?



over 3 years ago [edited]

@Cody Use styled(Card) instead of Card.extend


over 3 years ago

I'm getting this error and I can't fix it:

TypeError: Cards__WEBPACK_IMPORTED_MODULE_10_.Card.extend is not a function

Want to join the conversation?

Become a Pro member today!