News Articles styled-components

Use svg as a mask with styled components

I am trying to have an svg show the element behind it while other parts of the behind element are hidden. I hope that makes sense, to demonstrate here is a sandbox: https://codesandbox.io/s/muddy-firefly-17sy5?file=/src/components/Features.js I want to be able to see the gradient only within the animated svg and everywhere else to be white. import React […]

styled-components conditional animations performance issues

I have been playing around with styled-components and conditional rendering for a couple of days now and i have noticed some animation lag because of this i am not sure if it is actually related to styled-components or something else this is my button component can you please check if these checks are too heavy […]

Change button bgcolor depends on props

I want to change the background color of a button based on the props. Assume that I have 4 different names of background colors; primary, secondary, info, and warning. I inspect the code in chrome but no background show: This what I did: import React, { useState } from "react"; import styled from "styled-components"; import […]

How to correctly escape css functions for styled components?

Context: I want to animate two different components using the same css styles. Animations depend on some props being passed to the AnimatedBox component, then for example, if only props.right is true, then animate only the right border. I thought a css function would do the job, so for not repeating the code, I only […]

Setting height of react-table useTable rows

I’m having a hard time trying to set the height of a react-table using the useTable API. As seen in the code, I’m trying to force the height of the rows to be 30 here: {…row.getRowProps({ style: { height: 30 } })} But when the content of a cell is larger than 30px, the whole […]

Fixing height of react-table useTable rows

I’m having a hard time trying to set the height of a react-table using the useTable API. As seen in the code, I’m trying to force the height of the rows to be 30 here: {…row.getRowProps({ style: { height: 30 } })} But when the content of a cell is larger than 30px, the whole […]

Using variables to change CSS properties on a React project with Styled components

using Styled components with React. Got a bit of a head-scratcher which I’m unable to work out. I’ve created a navigation bar (and current changes are for mobile devices) – navigation items are stacked vertically & and at the bottom there is a "Close" button and at the top there is an "Open" (just styled […]

Two way binding between React components

working on a navbar (making changes for mobile devices) – when on a mobile device I want to display the items vertically with a "Close" button at the bottom of the list, which results in the nav tab being collapsed. And when collapsed, an open button at the top to expand the navbar. My current […]

Refactoring React code so that DOM elements are added & removed using CSS instead of ternary statements of JSX

I’m working on a React project and am trying to adjust the nav bar for mobile users. Normally – the nav bar spans the width of the screen horizontally, but when on mobile I want the items to stack vertically (which they do in my code currently). I now want to ensure that when isCollapsed […]

Icon won’t sit horizontally level with text within a span tag

struggling to get my icon (img) to line up nicely with my text (in a span) – I know I’m missing something really obvious. I just want my text "Close" to sit at the right hand side of the StyledCloseBar with the icon to left the left of it on the same level (height) – […]

Prevent React from displaying props meant for Styled-components?

I use Styled-Components with React. My code looks like this: const StyledLink = styled.a<StyledProps>` font-size: ${(props) => pxToRem(props.fontSize!)}; //disabled state ${(props) => props.disabled && css` color: grey; pointer-events: none; `} ` const Link = ({href, disabled, fontSize = 16, children}: Props) => { return( <StyledLink href={href} fontSize={fontSize} disabled={disabled}>{children}</StyledLink> ) } Everything works fine, however when […]

react style-component styles not being applied

The styles in this component are not applied. Following the exact same pattern in other components works just fine. I can’t figure out why. When the app is reloaded, there are no styles or name applied to the divs. If I adjust the css and save the app, the hot reload then shows the styles. […]

any reason why not to share styled-components?

I am in a decision making situation to recreate what i have already built or not. I have created a shared styled-component called SectionContainer and added it to a folder called shared in the root of my project. this styled-component have some modifying props added to it and I am almost using it in all […]

Changing React navigation bar behaviour and elements based on media queries

I’m using Styled Components with React on this project – I’ve currently got a navigation bar (horizontal as standard) – and am using media queries to stack vertically for when on mobile device. I’m a little confused on the best implementation approach for adding extra elements based on mobile. For example, when on mobile I […]

Global Styles breaking Grommet styled-components styles

I’ve tried to change my existing App to use Grommet for the Inputs. It worked quite fine, but I got a problem with the styles. The react-App is included on different pages, so I have to deal with different kinds of global css styles. Before Grommit Ive used inline styles, so I was able to […]

material-ui button with styled-components including react router Link

I’m working in React with typescript and styled components. I’m also using material-ui library. I’ve created styled material-ui buttons like below: import React from ‘react’ import styled from ‘styled-components’ import {Button, ButtonProps} from "@material-ui/core"; type StyledButtonProps = ButtonProps & { $color?: string, component?: JSX.Element, to?: string } export const CancelButton = styled(Button)` background-color: ${(props: StyledButtonProps) […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.