News Articles styled-components

Is there a fix for styling different components locally?

So to style this new component I made I’ve tried wrapping it in a , I’ve tried in-line styling (which is the only styling that works but gets messy), I’ve tried css modules and I’ve also tried configuring webpack.config.js file and nothing seems to work. In the config file I can’t really change it since […]

How to style child component in a react styled-component?

I can’t seem to style the inner child component Product to float left. I want to do this at upper parent level so the Product itself remains agnostic to position. import React from ‘react’; import Product from ‘./product.js’; import styled from ‘styled-components’; const ProductContainer = styled.div` ${Product} { float: left; } ` class ClassProductContainer extends […]

How can I target other css class in another class?

So I am making a navbar with react , I use three components for menu bar text logo and buttons. I give background of navbar to transparent and components to black. When hover components background turn white and navbar to white. The problem is I used three files for each component and I want to […]

Styling Components (styled-components) | Superimposing one on top of the other

The problem is this: There is a created UiInput React component using styled-components, above it there is also a UiInputExt React component, which should override some of the styles defined in UiInput, but for some reason this does not happen, apparently it does not even add the corresponding class… I attach the code below: const […]

Custom styled MUI IconButton does not work with tooltop

I have styled IconButton so it looks like I need the problem I have right now is that when I use ToolTip it does not appear near to my button but instead in top left corner of the page. What I do wrong? import { styled } from ‘@mui/material/styles’; import IconButton from ‘@mui/material/IconButton’; import { […]

Dynamic props depending on other prop

I have this component, which is just a title and an icon on the right, and the container of this component can be a button, an anchor element, or a Link element from react-router-dom. I was able to create the container dynamically like so: import { Link } from "react-router-dom"; // …. type Props = […]

How to apply a styled component style to a non-className property?

I am using @mui/material and a third-party component that has two properties: className and wrapperClassName. Setting the className prop is trivial. import styled from ‘@mui/material’; import { Checkbox as _Checkbox } from ‘my-checkbox-component’; const Checkbox = styled(_Checkbox)` // my styles here `; I want to know how to create a style for wrapperClassName. I’ve tried […]

How to use styled components in React to create dynamic web font @font-face rules?

I am working on a project that requires the creation of dynamic web font @font-face rules. In addition, I have a range input that allows users to resize the font-size. For the @font-face rules, my solution was to try styled components. I am accessing my styled component within the map in the return statement. This […]

How to prevent @media query from triggering css animations?

I’m currently working on my portfolio website and I encountered a problem. I have an animation that I want to only be triggered on certain screen size. So I put it inside a @media query. It works as it should but there is one problem. Every time the screen crosses that breakpoint this animation is […]

Invert two React component text colors when clicking on input tag

I am new to React and did not find any solution to this simple problem. I want to revert LangText colors when the toggle button is clicked – initially ENG is white and EST is black and every time input is clicked the colors invert. I have separate files for returning and styling components. I […]

How to change font-family using styled-components ThemeProvider?

I have a parent theme and I would like to have a button on the same page using a different theme. The theme file my button is cuurently using: export const tesla = { font: { family: { headings: { regular: "/fonts/Metropolis-Medium.ttf", bold: "/fonts/Metropolis-Bold.ttf", }, body: { light: "/fonts/Metropolis-Regular.ttf", regular: "/fonts/Metropolis-Regular.ttf", semibold: "/fonts/Metropolis-Regular.ttf", bold: "/fonts/Metropolis-Regular.ttf" […]

Why styled-system responsive array does not work?

I cannot make my sizes to be responsive. I pass array into styled component and it should be changed for different layouts. Layouts are changed correctly, the breakpoint is displayed properly when I change screen size, from wide to mobile. There are 4 sizes here in this setup. But this is what I see when […]

On mobile, ReactJS background video (styled components) jumps to the full screen and you have to swipe it away to remove it. How do you fix this?

I’m having this issue on mobile where the video scales to full screen after the page loads, and then I have to swipe it away to see the website. I’m using this as an example but my code is similar: (based on this repo: For my code, I used styled components and this […]

How do I reference another component’s styled-components generated className while creating a (hover) rule in a different component?

I’m creating a menu with styled-components and React, and want the color of the icon to change on hover, but I need it to change when the icon’s parent is hovered, so that hovering the text next to the icon also activates the icon’s hover styles. Here is the code I’m using to get close: […]

What CSS version does styled-components support?

What CSS version does styled-components support? Source: CSS – Stack Overflow

React importing image does not work for CSS

I am having problems importing my image for CSS. I have imported the image as a test and it works when using it in the img tag using src={furnitureBG}. I followed the docs and imported the image and then using the path as the value for url(”). However, no image renders and there is no […]

React styled-components with macro TypeError: Cannot read properties of undefined (reading ‘path’)

I have a project in React with TypeScript and I am trying to switch to Ubuntu 20.04 from Windows 10. On Windows my project runs fine. But on Ubuntu, when I try to run it with npm run start I get this error: TypeError: /home/dragos/Desktop/project/frontend/src/components/ Cannot read properties of undefined (reading ‘path’) If I remove […]

uploading file fail using reactjs suspense

I am setting a project but can not upload img and failed.and notification 403 Forbidden.While I use [email protected] and password admin login and I want to create a new product in this link:http://localhost:3000/#/dashboard/newProduct.I affix related code as follows: in usePostNewProductForm.js: import {useForm} from ‘react-hook-form’ import {useState} from ‘react’ import postProductAPI from ‘../API/postProductAPI’ import {useStorage} from […]

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.