News Articles styled-components

Styled components React router v6

const StyledNavLink = styled(NavLink)` text-decoration: ${(props) => { console.log(props.style); return props.style ? (isActive) => (isActive ? "underline" : "none") : "none"; }}; &:hover { text-decoration: underline; } `; export default function BasicExample() { return ( <Router> <Navbar> <NavItems> <NavItem> <NavLink to="/" end={true} style={({ isActive }) => { console.log(isActive + "About"); return { textDecoration: isActive ? […]

How can I css style a child react component?

In simple HTML structure I can achieve it as following. I’d like to know how can I do the same with React and Styled Component. HTML <div className="slider"> <section>Content A</section> <section>Content B</section> </div> And I can target the styling of the section like this. .slider section { //some styling }; How can I achieve the […]

Style not getting overwritten in react-native using styled-components

I’m trying to override a button’s properties in the calling component using styled-components but it’s not working. Nothing gets overridden and the component looks as though it’s not taking on the overridden properties. I’ve got a button defined like so: import React from ‘react’; import { TouchableHighlight, View, Text, StyleSheet } from ‘react-native’; type ButtonProps […]

Cannot Nextjs Component (Link) using styled-components

I am trying to styled Link Component provided by NextJS using Styled-Components. I have done all the setup including babel-plugin-styled-components, creating _document.js in /pages. But still I am unable to Style the link component. For setup, I have followed this article: https://medium.com/nerd-for-tech/using-next-js-with-styled-components-easy-dfff3849e4f1 This is working fine const StyledComponent = Styled.a` color: red; ` But this […]

Import SVG image to navbar react js

i am struggling to describe the question i need to search so i am going to post here with the code and problem i am having and hopefully a senior front end dev could help me work it out. So i am working on this atm… see where it says Junodrop i would like to […]

Remove outline only on click event

As the title says I would like to remove the focusable HTML tags’ outline only when focus is triggered by a click event. This means I would like to keep outline for tabbing. Does anyone know a practice or library I could use here? If not, my idea is attaching an event listener to window […]

Put a pseudo element over other pseudo element (css best practices)

I downloaded this design from frontend mentor to practice my css skills this is the hover state of the design this is my design I got this result with the next css rules: const CardImage = styled.div` background-image: url(${(props) => props.cardImage || DefaultImage}); background-repeat: no-repeat; background-size: cover; border-radius: 15px; height: 270px; margin-bottom: 25px; width: 270px; […]

How to display backgroung image once it’s assigned as constant using styled components

I want to display background image on full size of the parent component, this image is assigned to const "image", parent is Dialog from Material UI. Below is the code which I have now and not working. How should I implement it ? const image = ‘../../../../../../shared/src/lib/assets/images/logo/SVG/nevomo_logo_orange.svg’; return ( <div> <StyledLogo onClick={handleClickOpen} /> <StyledDialog onClose={handleClose} […]

NextJS – body background colour resets on refresh

I have a next app set up with styled-components, and a global style config (also from sc) which contains a dark colour for the body background body { background-color: #1b1b1b; } However, whenever I refresh the page, the background briefly flashes white, before becoming black again after the page has been painted – this does […]

Styled-components – Over 200 classes were generated, but cant get :hover to work

I came across the error in styled-components : Over 200 classes were generated for component…… and did the suggested fix from console, and that did the trick, but when I have a container component "Card" that when hovered should change text color of another component "Number" (which has that suggested fix applied, then I cant […]

In React, how to setState a Data by using hook useState?

I am just getting started learning React Functional component and styled- component. I tried to setState detailePageData const const [marketPriceData, setMarketPriceData] = useState([]); and I tried to set up the marketPriceData by using JSON file. useEffect(() => { fetch(`/data/detailPageData.json`) .then(res => res.json()) .then(data => setMarketPriceData(data.result.order_history)); }, []); When I console.log marketPriceData. I got this In […]

How to style an SVG using React styled components by passing the SVG as prop?

I have this SVG, imported from figma: import React from ‘react’; function CloseIcon() { return ( <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_5301_20199)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M19.8539 4.85394C20.0491 4.65868 20.0491 4.3421 19.8539 4.14683C19.6586 3.95157 19.342 3.95157 19.1468 4.14683L12.0007 11.2929L4.85372 4.14634C4.65845 3.95108 4.34187 3.95109 4.14661 4.14636C3.95136 4.34162 3.95136 4.65821 4.14663 4.85346L11.2936 […]

Framer Motion exit animation triggers when toogling menu-modal but doesn’t when changing routes

When toogling the NavMenu (via hamburguer & close icon) on the mobile version of website (max-width:700px), the exit animations of the pages works as intended, but when changing pages via the NavBar links on the desktop version, the exit animations doesn’t seem to trigger. NavBar = generic upper navigation bar; NavMenu = works simillarly as […]

how to solve the problem of overwriting in react when you have a component with props?

I have a modal component that has a variation with only style changes, but that variation doesn’t apply the styles without the {…props} how can I solve? I can’t use {…props} by recommendation in the company const Modal: React.FC<ModalProps> = ({ open, children , title, closeClick, …props }) => { return ( <ModalWrapper open={open} {…props}> […]

Flexbox styles not working in React Styled Component

I’ve been struggling with the styling of my React app using StyledComponents, however I’ve succesfully re-created & fixed the issue in this codepen: https://codepen.io/simoncunningham/pen/mdwMgyL (Basically using flex: 1) to ensure the checkbox expands to the full width of parent) however I cannot reflect this change with my StyledComponents, can anyone see where I might be […]

Styled-components Enzyme don’t mount

I have a React component with styled-components and testing it with Jest and Enzyme. With shallow everything works fine, but I have one specific test where I need to use mount. This test fails. It gives me Error: Uncaught [TypeError: Cannot read property ‘length’ of undefined], but I don’t have length property anywhere in this […]

Why I can’t see props in intellisense when using styled-system with styled components?

So, first of all, I declare my component like this: import styled from ‘styled-components’; import { space, color, layout, flexbox, border, } from ‘styled-system’; const FlexWrapper = styled.div` display: flex; ${layout}; ${space}; ${color}; ${flexbox}; ${border}; `; export default FlexWrapper; Then I just use it: return ( <FlexWrapper flexDirection=’column’ width={width}> <FlexWrapper flexDirection=’row’ gap=’30px’> {filters} </FlexWrapper> </FlexWrapper> […]

React Link – TypeError: Cannot read properties of undefined (reading ‘pathname’)

I want to add several infos sections in my front page, each having a button linking to an associated page on my website. Instead of writing a very large InfoSection component comprising all the sections (there will be 4 or 5), I tried to write only one section ‘template’ in the InfoSection component, and use […]

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.