How to make a styled component work with css transition? - reactjs

The app consists of 2 blue squares and a button.
First square is a html div and the second square is a styled component div. They should toggle between blue and red color during 2s transition after clicking the button. However, only the square with html div respects transition duration. The styled component changes color at once.
Is it possible to make it work so that the styled component respects the transition duration?
Here is the codesandbox example: https://codesandbox.io/s/styled-component-transition-jcnom
function App() {
const [red, setRed] = React.useState(false);
function handleClick() {
setRed(v => !v);
}
const styledCss =
red &&
css`
background-color: red;
transition: background-color 2s linear;
`;
const StyledSquare = styled.div`
color: white;
margin: 10px;
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 2s linear;
${styledCss};
`;
const classes = red ? "red sq" : "sq";
return (
<div className="App">
<div className={classes}>html div</div>
<StyledSquare>styled component</StyledSquare>
<button onClick={handleClick}>Click</button>
</div>
);
}

It's not working because you have your styled component in App function. Every rerender it's being declared again, so transition can't happen. Simply move styled components outside function to fix it. I'm passing props here to styled component to change color.
import React from "react";
import ReactDOM from "react-dom";
import styled, { css } from "styled-components";
import "./styles.css";
const StyledSquare = styled.div`
color: white;
margin: 10px;
width: 100px;
height: 100px;
background-color: ${props => props.red ? "red": "blue"};
transition: background-color 2s linear;
`;
function App() {
const [red, setRed] = React.useState(false);
function handleClick() {
setRed(!red);
}
return (
<div className="App">
<StyledSquare red={red}>styled component</StyledSquare>
<button onClick={handleClick}>Click</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Related

How to make #emotion/style styles change when a class is changed on a div

SandBox: https://codesandbox.io/s/infallible-nash-x91zz?file=/src/App.js
In the sandbox I have an emotion style defined. It has two classes it in — open and closed.
I am using a state to toggle the classes and the classes are toggling correctly according to the inspector.
Problem: styles not updating on state change.
Expected behavior: background color on div will change when class changes between open and closed
Actual Behavior: The classes are being updated but the stiles are not.
Code:
import React, { useState } from "react";
import "./styles.css";
import styled from "#emotion/styled";
const MenuContainer = styled.div`
.open {
background-color: blue;
width: 600px;
height: 600px;
}
.closed {
background-color: red;
width: 600px;
height: 600px;
}
`;
export default function App() {
const [openState, setOpenState] = useState(false);
return (
<MenuContainer className={openState ? "closed" : "open"}>
<button value="click" onClick={() => setOpenState(!openState)}>
Click Me
</button>
</MenuContainer>
);
}
You should do this:
const MenuContainer = styled.div`
width: 600px;
height: 600px;
&.open {
background-color: blue;
}
&.closed {
background-color: red;
}
`;

error:styled_components__WEBPACK_IMPORTED_MODULE_0__.default.FaChevronRight is not a function

**import styled from 'styled-components';
import { FaChevronRight } from 'react-icons/fa';
const ButtonSty = styled.button`
width:128px;
height:32px;
border:2px solid #074EE8;
box-sizing:border-box;
border-radius:4px;
`
const Ancor = styled.a`
font-style:normal;
font-weight:normal;
font-size:16px;
line-height:18px;
color:#074EE8;
text-decoration:none;
`
const Icon = styled.FaChevronRight`
width:4px;
height:9px;
border:2px solid #074EE8;
`
function Button() {
return (
<div>
<ButtonSty> <Ancor href="#">Saznaj vise **<Icon />**</Ancor> </ButtonSty>
</div>
)
}
export default Button**
Guestion: how to style a react-icon with styled-component
When i create Icon and put in ancor the error above show
I do not know how to style component with react-icon
The dot notation is for styling HTML elements, i.e. button, a, div, etc. The correct syntax for styling another React component is:
const Icon = styled(FaChevronRight)`
width: 4px;
height: 9px;
border: 2px solid #074EE8;
`
See: Extending Styles
This is a custom component, so you have to wrap it with parentheses:
const Icon = styled(FaChevronRight)`
width:4px;
height:9px;
border:2px solid #074EE8;
`

styled-component with react js

I have an Button that I want to animate :after and ::before width onMouseOver from 0% to 50%,
and when onMouseLeave from 50% to 0
i'm using react-hooks but it's working only onMouseOver
what is my problem ?
my code in this link
https://codesandbox.io/s/cold-haze-t7b4c
You could animate things with the following using styled components. Although you could do the same with just the padding instead of using :before and :after.
File: Button.js
import styled from "styled-components";
const Button = styled.button`
display: flex;
line-height: 30px;
padding: 0;
&:before,
&:after {
display: block;
width: 0px;
content: "";
transition: all 250ms ease-in-out 0s;
}
&:hover {
&:before, &:after {
width: 50px;
}
}
`;
export default Button;
File: App.js
import React from "react";
import "./styles.css";
import Button from "./Button";
export default function App() {
return (
<div className="App">
<Button>Hover Me</Button>
</div>
);
}

How do I over write nested classes of material-ui in styled-components?

Method 1:
const StyledTextField = styled(({ ...rest }) => (
<OutlinedInput {...rest} classes={{ root: 'outlinedRoot' }} />
))`
.outlinedRoot {
.$notchedOutline {
border-color: red;
}
}
background: #fff;
border-radius: 4px;
color: #808080;
height: 53px;
`;
Method 2:
const StyledTextField = styled(OutlinedInput).attrs({
classes: { root: 'outlinedRoot', notchedOutline: 'notchedOutline' }
})`
.outlinedRoot {
.notchedOutline {
border-color: red;
}
}
background: #fff;
border-radius: 4px;
color: #808080;
height: 53px;
`;
I have seen also what classes needs to be added and read articles about that, but I am not able to overwrite
I tried above two ways to change the outline color but i am not able to do that
Below is an example of one way to do this. To do this with TextField rather than OutlinedInput, just add a space before .MuiOutlinedInput-root so that you match that as a descendant of TextField rather than matching that as one of the other classes on the root element. .MuiOutlinedInput-root is actually unnecessary for the styling except for helping with CSS specificity.
import React from "react";
import ReactDOM from "react-dom";
import OutlinedInput from "#material-ui/core/OutlinedInput";
import styled from "styled-components";
const StyledOutlinedInput = styled(OutlinedInput)`
&.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
border-color: green;
}
&:hover.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
border-color: red;
}
&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
border-color: purple;
}
`;
function App() {
return (
<div className="App">
<StyledOutlinedInput defaultValue="My Default Value" />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Related answers:
Change border color on Material-UI TextField
Change outline for OutlinedInput with React material-ui
How do I override hover notchedOutline for OutlinedInput
Global outlined override

styled-components causing unexpected behaviour when rendering props

I have a WhiteBox react component which simply renders a white box with some styles.
I have a SmallBox react component which simply uses WhiteBox to render a more specific box.
I have a Content react component which renders three SmallBox boxes which does what it's supposed to do (renders three white boxes).
However when I tried to add a text as a props from the parent, the white box is aligned with some unexpected margin from top.
NOTE: when I simply put "This is a text" the css is okay, but when I send "this is a text" as props.text, the whitebox is rendered with extra margin from top.
I Use styled-components and react as I said.
I've tried to console.log the text, and everything seems to be okay. I also tried to switch the props.children or props.text and it does not work
-----------------White Box Component ----------------------
import styled from "styled-components";
const StyledBox = styled.div`
display: inline-block;
width: ${props => props.width}px;
height: ${props => props.height}px;
margin-right: ${props => props.marginRight}px;
margin-left: 100px;
background-color: white;
border-radius: 5px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
color: #646777;
padding: 10px;
`;
const WhiteBox = props => {
return (
<StyledBox
width={props.width}
height={props.height}
marginRight={props.marginRight}
>
{props.text} // if I change this to simply "this is a text" it works well. somehow the props.text is causing problems.
</StyledBox>
);
};
export default WhiteBox;```
-----------------Small Box Component ----------------------
import React from "react";
import styled from "styled-components";
import WhiteBox from "../whitebox/white-box";
const SmallBox = props => {
return (
<WhiteBox width={320} height={130} marginRight={70} marginLeft={70} text={props.text}>
</WhiteBox>
);
};
export default SmallBox;
-----------------Content Component ----------------------
import React, { Component } from "react";
import SmallBox from "./smallbox/small-box";
import styled from "styled-components";
const StyledContent = styled.div`
position: absolute;
left: 320px;
top: 80px;
width: 100%;
height: 100%;
background-color: #f1f3f7;
`;
class Content extends Component {
render() {
return (
<>
<StyledContent>
<SmallBox text="this text is great" /> // causing problem
<SmallBox />
<SmallBox />
</StyledContent>
</>
);
}
}
export default Content;
The issue has to do with how many lines are rendered. The longer the text in the props, the more the lines rendered.
One solution would be to change the display property for WhiteBox:
const StyledBox = styled.div`
display: inline-flex;
....
`;
Another solution would be to override the default style vertical-align: baseline, simply add vertical-align: top;
const StyledBox = styled.div`
display: inline-block;
....
vertical-align: top;
`;

Resources