styled-components

I'm using Material UI and trying to convert normal css classes into js file. .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .navItem { float: left; flex: 1; } .navLink { color: white; text-decoration: none; display: block; font-size: '1 rem'; font-weight: 500; line-height: 1.6; letter-spacing: '0.0075em'; opacity: 1; text-transform: 'none'; min-width: 0; padding: 10px; margin-left: 10px; margin-right: 10px; } .navLink-static { color: white; text-decoration: none; display: block; font-size: '1rem'; font-weight: 500; line-height: 1.6; letter-spacing: '0.0075em'; opacity

I'm working with styled-components and generating components using their tagged template literal syntax such as: const Button = styled.button` background-color: papayawhip; border-radius: 3px; color: palevioletred; ` In one case I need to call a function that generates a media query based on a breakpoint and passes the tagged template literal of css to be included within. for example: media(12)` background-color: papayawhip; ` The media function might look something like this: const media = mapValues(width => ({ css: (...args) => css` @media (min-width: ${width}rem) { ${css(...args)} } `}));

I'm using styled-components to build my components. All style properties which accept custom values are reused throughout my components (as it should be). With that in mind, I'd like to use some sort of global variables so that updates will propagate to all components without needing to update each style individually. Something like this: // Variables.js var fontSizeMedium = 16px; // Section.js const Section = styled.section` font-size: ${fontSizeMedium}; `; // Button.js const Button = styled.button` font-size: ${fontSizeMedium}; `; // Label.js const Label = styled.span` font-size: $

What is the best way to handle hovers in styled-components. I have a wrapping element that when hovered will reveal a button. I could implement some state on the component and toggle a property on hover but was wondering if there is a better way to do this with styled-cmponents. Something like the following doesn't work but would be ideal: const Wrapper = styled.div` border-radius: 0.25rem; overflow: hidden; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25); &:not(:last-child) { margin-bottom: 2rem; } &:hover { .button { display: none; } } ` mxstbr As of styled-components v2 you can interpolate