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>
);
}
Related
I'm playing around with styled-components and having troubles working with material-ui. So thats the code:
import React from "react";
import styled from "styled-components";
import ChatIcon from "#mui/icons-material/Chat";
import MoreVertIcon from "#mui/icons-material/MoreVert";
import { Avatar} from "#mui/material";
function Sidebar() {
return (
<Container>
<Header>
<UserAvatar className={"override"} />
<IconsContainer>
<IconButton>
<ChatIcon />
</IconButton>
<IconButton>
<MoreVertIcon />
</IconButton>
</IconsContainer>
</Header>
</Container>
);
}
export default Sidebar;
const Container = styled.div``;
const Header = styled.div`
display: flex;
position: sticky;
top: 0;
background-color: white;
z-index: 1;
justify-content: space-between;
align-items: center;
padding: 15px;
height: 80px;
border-bottom: 1px solid whitesmoke;
`;
const UserAvatar = styled(Avatar)`
height: 60px;
`;
const IconsContainer = styled.div`;
The styled div is working completely fine, but when I import 'Avatar' from #mui and try to add some styling named UserAvatar, it is completely ignoring what I'm writing down.
I think that with mui they have their own version of styled for styled components. https://mui.com/system/styled/
It appears they want you to use it rather than styled-components
import Button from '#mui/material/Button';
import { styled } from '#mui/material/styles';
const CustomButton = styled(Button)({
// your custom styles go here
}) as typeof Button;
see the import from import { styled } from '#mui/material/styles';;
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;
}
`;
**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;
`
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);
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;
`;