Hoping someone can assist. I am using the MobileStepper component, specifically:
https://mui.com/api/mobile-stepper/
and attempting to use a different background color for this stepper. Looking at the Dev Tools for this component, I found the following:
.MuiMobileStepper-root {
display: flex;
padding: 8px;
background: #fafafa;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
I actually just want to change the background value to:
.MuiMobileStepper-root {
background: #dadada;
}
Unsure how to change this within my React component.
Not sure if it's an overrides/root style change?
This worked for me
<MobileStepper sx={{ bgcolor: 'transparent' }}/>
Related
I'm witnessing a weird behavior when in styled-components with SSR in remix.run
I have a ProductCard Component that renders a normal product card with styled-components
ProductCard.tsx
import Button from "../Button";
function ProductCard({ product }: props) {
return (
<>
<Wrapper>
....
<ButtonsWrapper>
<Cart
onClick={addToCart}
mode={addedToCart ? "secondary" : "primary"}
disabled={loading}
key="cart-button"
>
{addedToCart ? "Added!" : "Add to cart"}
{loading && <LoadingSpinner src="/images/responses/loader.svg" />}
</Cart>
<ShareButton mode="secondary" aria-label="share">
<Icon id="share" />
</ShareButton>
</ButtonsWrapper>
</Wrapper>
</>
);
}
const Cart = styled(Button)`
flex: 1.1;
display: flex;
justify-content: center;
gap: 10px;
`;
const ShareButton = styled(Button)`
padding: 0.9rem;
`;
const Wrapper = styled.div`
--border-radius: ${clamp(15, 20)};
--columnGap: ${clamp(20, 30)};
display: flex;
flex-direction: column;
gap: var(--columnGap);
justify-content: space-between;
width: 100%;
height: 100%;
margin: auto;
background-color: var(--azure-15);
padding: 1.9rem 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow-lg);
border: var(--border-lg);
`;
const ButtonsWrapper = styled.div`
display: flex;
justify-content: space-between;
gap: 0.625rem;
`;
export default ProductCard;
Button.tsx
const Button = styled.button<{ mode: "primary" | "secondary" | "dark" }>`
display: grid;
/* justify-content: center; */
align-items: center;
text-align: center;
color: var(--mintCream);
padding: ${clamp(9, 10)} ${clamp(20, 30)}; // this clamp function just generates the css clamp func with calculating the values with some equations
box-shadow: var(--box-shadow-md);
border: var(--border-md);
border-radius: 12px;
text-decoration: none;
cursor: pointer;
transition: all 500ms ease;
font-size: ${clamp(13, 16)};
&:disabled {
cursor: not-allowed;
opacity: 0.7;
}
#media (hover: hover) and (pointer: fine) {
&:hover:enabled {
transform: translateY(-2px); }
}
width: fit-content;
`;
The normal render of this Component is as follows
But when navigating to another path and returning to it on / , it renders like this
This problem only happens in production and works fine on local server...
when inspecting elements, I find that the class name of the Cart Component is also injected into the ShareButton Element
I can't find an explanation for this problem and it gets weirder... When I swap the order of the variables Cart and ShareButton or swap them with the Wrapper Element, some other weird behaviors happen like the one below
In this case, the class name of the Cart Component got injected on the parent elemnt of the parent element of the ProductCard Component
I've probably hit on 4 of these rendering issues but all of them share the same problem, the class name of the Cart Components gets injected on a wrong dom element, whether it's a parent or a sibiling
You can view the first weird behaviour here https://store.ieeenu.com
You will find the product component on the root path, navigate to some path like categories/circuits-1-ecen101 and return to the root and you will see the issue
also, you can review the second weird behavior in a previous build here
https://ieee-nu-store-r243eocii-omarkhled.vercel.app/
I just changed the initialization order of the Cart and ShareButton Components as I said earlier
I don't know whether this problem is from styled-components or from remix (this is the first time for me using remix), it's mentioned here https://github.com/remix-run/remix/issues/1032 that the lack of the babel-plugin-styled-components in remix.run introduces some problems in rehydration but I'm not sure that this is the issue I'm facing...
Thanks for reading this till the end and excuse my English, I'm not a native speaker :"
Hi everyone im in trouble with active Link, i use Styled Component.
I want my link to be Red when i'm on active link but nothing work.
I tried ActiveCLassName but this not work too.
can someone help me?
thanks a lot
const NavLink = styled(Link)`
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 10px;
list-style-type: none;
text-decoration: none;
color: black;
background-color: yellow;
border: 0.1px solid lightgrey;
`;
export default function Nav() {
return (
<NavWrapper>
<UlNav>
<LiNav>
<NavLink to="/Burgers">Burgers</NavLink>
</LiNav>
<LiNav>
<NavLink to="/Burgers">Pizza</NavLink>
</LiNav>
<LiNav>
<NavLink to="/Burgers">Drinks</NavLink>
</LiNav>
</UlNav>
</NavWrapper>
)};
Issues
The issue I see is you are styling the Link component instead of the NavLink component. The Link component doesn't take any additional props for handling active links.
Solution
The NavLink component uses a .active class by default, so of you don't need any special classname you should use this class.
Example:
import { NavLink as BaseNavLink } from "react-router-dom";
const NavLink = styled(BaseNavLink)`
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 10px;
list-style-type: none;
text-decoration: none;
color: black;
background-color: yellow;
border: 0.1px solid lightgrey;
&.active {
.... your active CSS rules here
}
`;
Tested and works in both RRDv5 and RRDv6.
RRDv5
RRDv6
"/drinks"
"/burgers"
Your code is missing some stuff, like I am not seeing anywhere you are setting color: red like you want. Basically, the active link will have the class active applied, so either using a normal stylesheet or inside your styled(Link, you have to write a rule for that class that does what you want.
Like it says here Use 'active' state from React Router in Styled Components. You may have to use the &.active selector to apply the styles.
activeClassName just changes what the class name is, which isn't what you want. By default it is active which is fine, you just have to write the CSS rule to match it. https://v5.reactrouter.com/web/api/NavLink/activeclassname-string
I'm really new when it comes to styling components and making them look the way I want.
My desired outcome is to have two box components that overlap each other for a nice clean look for displaying user stats and remaining targets for the day.
What I have in mind is:
If anyone can give me some pointers with regards to styling the box component to look like the above image, I would be really greatful.
To start please take a look at MUI Box, which provides a great description to play with the Box component of Material-UI.
Here is an example from the link
<Box
sx={{
width: 300,
height: 300,
backgroundColor: 'primary.dark',
'&:hover': {
backgroundColor: 'primary.main',
opacity: [0.9, 0.8, 0.7],
},
}}
/>
sx is being used for styling the Box component and inside this example we can see that we can change the width, height and background color of the box from the component itself. To something similar to what you had requested I took the liberty of using styled-components to style the Box component as follows:
import * as React from "react";
import Box from "#mui/material/Box";
import styled from "styled-components";
const DataBoxContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 20vh;
position: relative;
`;
const StyledOuterBox = styled(Box)`
border-radius: 20px;
position: absolute;
`;
const StyledInnerBox = styled(Box)`
border-radius: 10px;
position: relative;
bottom: 50px;
`;
const StyledData = styled.p`
color: black;
align-self: flex-start;
position: absolute;
bottom: 30px;
margin-inline-start: 20px;
`;
export default function DataBox() {
return (
<DataBoxContainer>
<StyledOuterBox
sx={{
width: 500,
height: 250,
backgroundColor: "gray"
}}
>
<StyledData>test</StyledData>
</StyledOuterBox>
<StyledInnerBox
sx={{
width: 480,
height: 200,
backgroundColor: "blue"
}}
/>
</DataBoxContainer>
);
}
Feel free to play with this example at CodeSandbox
I'm sure this can be improved but can give you an idea on how to start.
Please feel free to ask me any questions on it, as you requested for pointers but I have provided a code.
I am trying to reproduce this code from https://styled-components.com/docs/advanced in typescript.
const Link = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
`;
const Icon = styled.svg`
flex: none;
transition: fill 0.25s;
width: 48px;
height: 48px;
${Link}:hover & {
fill: rebeccapurple;
}
`;
What do I have to do for it to work in typescript?
The problem was that I was trying to reference a component that I imported from another file instead of that component's styled counterpart. I mistakenly thought it was a typescript issue.
tried to change the antd carousel dots styles, it can be able to implement with CSS but not with styled-components(CSS is not allowed in my project). as im new to front-end dont know the proper solution for this.
here is the code example https://stackblitz.com/edit/react-opnojd-rfagtz?file=index.js
thanks in advance :)
When using styled-component, the style would be applied with className sc-....
In your case, its style would be applied in div containing .slick-slider.
But, .ant-carousel is className for parent of that.
So, if it was included in the selector, style will be not applied.
Try this.
const CarouselWrapper = styled(Carousel)`
> .slick-dots li button {
width: 6px;
height: 6px;
border-radius: 100%;
}
> .slick-dots li.slick-active button {
width: 7px;
height: 7px;
border-radius: 100%;
background: red;
}
`;