Currently, I styled background-color: red; if the MenuItem that has selected={true}
and if I hover the option, MenuItem background-color will change to green.
But when I hover over the MenuItem that has selected={true}, the background-color will be light-blue which is mui default.
I'd like to keep background-color: red; for MenuItem that has selected={true} even if this component get hovered over.
index.js
import * as React from "react";
import Paper from "#mui/material/Paper";
import MenuList from "#mui/material/MenuList";
import Stack from "#mui/material/Stack";
import { MenuItem } from "./styles";
export default function MenuListComposition() {
return (
<Stack direction="row" spacing={2}>
<Paper>
<MenuList>
<MenuItem selected={true}>Profile</MenuItem>
<MenuItem>My account</MenuItem>
<MenuItem>Logout</MenuItem>
</MenuList>
</Paper>
</Stack>
);
}
styles.js
import styled from "styled-components";
import { default as MuiMenuItem } from "#mui/material/MenuItem";
export const MenuItem = styled(MuiMenuItem)`
color: blue;
padding: 20px;
&.Mui-selected {
background-color: red;
}
&:hover {
background-color: green;
}
`;
You are almost there, just need to add the &.Mui-selected:hover to overwrite the default background color.
export const MenuItem = styled(MuiMenuItem)`
color: blue;
padding: 20px;
&.Mui-selected {
background-color: red;
}
// Add this
&.Mui-selected:hover{
background-color: red;
}
&:hover {
background-color: green;
}
`;
Here is the working codesandbox
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';;
I'm trying to add style to a component.
It works fine with a component imported from the material-ui library, but it doesn't work when it comes to my original component(that is not used in any library).
Here is the code for style with styled-component
import styled from "styled-components";
import List from "./List";
import AcUnitIcon from "#mui/icons-material/AcUnit";
export const ListCotainer = styled(List)` // doesn't apply style
margin: 100px;
color: pink;
`;
export const Container = styled.div` // applies style
font-family: sans-serif;
text-align: center;
background-color: red;
`;
export const Icon = styled(AcUnitIcon)` // applies style
background-color: blue;
margin: 100px;
padding: 20px;
${Container}:hover & {
background-color: green;
}
`;
App.js
import { ListCotainer, Container, Icon } from "./styles";
export default function App() {
return (
<Container>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<ListCotainer />
<Icon />
</Container>
);
}
List.js (regular component with no library)
import React from "react";
const List = () => {
return (
<div>
<h1>Hello styled component</h1>
</div>
);
};
export default List;
Is there any way I can add style to the List component?
you need to create styled CSS same as you have created for Container in your App.js. i have update your code it should work for you.
styles.js
import styled from "styled-components";
import AcUnitIcon from "#mui/icons-material/AcUnit";
export const ListCotainer = styled.div`
margin: 100px;
width: 200px;
color: pink;
`;
export const Container = styled.div`
font-family: sans-serif;
text-align: center;
background-color: red;
`;
export const Icon = styled(AcUnitIcon)`
background-color: blue;
margin: 100px;
padding: 20px;
${Container}:hover & {
background-color: green;
}
`;
List.js
import React from "react";
import { ListCotainer } from "./styles";
const List = () => {
return (
<ListCotainer>
<h1>Hello styled component</h1>
</ListCotainer>
);
};
export default List;
App.js
import { Container, Icon } from "./styles";
import List from "./List";
export default function App() {
return (
<Container>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<List />
<Icon />
</Container>
);
You may not be able to style like this component and what you are applying to the style material component is a svg/icon that you can apply to icons and img with style components.
style.js
import styled from "styled-components";
import AcUnitIcon from "#mui/icons-material/AcUnit";
export const ListCotainer = styled.div`
margin: 100px;
width: 200px;
color: pink;
`;
export const Container = styled.div`
font-family: sans-serif;
text-align: center;
background-color: red;
`;
export const Icon = styled(AcUnitIcon)`
background-color: blue;
margin: 100px;
padding: 20px;
${Container}:hover & {
background-color: green;
}
`;
App.js
import { Container, Icon } from "./styles";
import List from "./List";
export default function App() {
return (
<Container>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<List />
<Icon />
</Container>
);
}
List.js
import React from "react";
import { ListCotainer } from "./styles";
const List = () => {
return (
<ListCotainer>
<h1>Hello styled component</h1>
</ListCotainer>
);
};
export default List;
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>
);
}
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
Please forgive my confusion and newbiness. I'm trying to export a styled Button. Totally dazed and confused. Please help. I don't really want to export 2 buttons, as shown, but a single Button with the styles from the props, and the given styles as the default, I think :(
import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import styled, { css } from 'styled-components'
export default class Button extends React.Component {
btn: Btn = (props) => {
styled.button`
border-radius: 3px;
padding: 0.25em 1em;
margin: 0 1em;
background: transparent;
color: palevioletred;
border: 2px solid palevioletred;
${props => props.primary && css`
background: palevioletred;
color: white;
`}
`
}
render(
<Btn>Normal Button</Btn>
<Btn primary>Primary Button</Btn>
)
}
And my App element in case it's relevant
import React, { Component } from 'react'
import 'containers/App.css'
import Button from 'components/Button'
export default class App extends Component {
render() {
return (
<div>
<p>
<Button primary="primary" label="Button Help" />
</p>
</div>
)
}
}
Define your Styled Button as follows
import React from 'react';
import styled, {css} from 'react-emotion';
const StyledButton = styled('button')`
border-radius: 3px;
padding: 0.25em 1em;
margin: 0 1em;
background: transparent;
color: palevioletred;
border: 2px solid palevioletred;
`;
const primary = css`
background: black;
color: white;
`;
export default class Button extends React.Component {
render() {
return (
<div>
<StyledButton className={this.props.primary && `${primary}`}>
{this.props.label}
</StyledButton>
</div>
);
}
}
and in app element use buttton as follows
import React, { Component } from 'react'
import 'containers/App.css'
import Button from 'components/Button'
export default class App extends Component {
render() {
return (
<div>
<p>
<Button label="Button Help" /> // for normal Styled Button
<Button primary label="Button Primary" /> // for Primary Styled Button
</p>
</div>
)
}
}