Material-ui/ReactJS newbie question. I'm trying to show a pointer cursor when hovering over a Material-ui TextField but having a difficult time doing so. It makes use of 'cursor: text' by default. I've been able to successfully change the textfield background color on hover but adding "cursor: pointer !important" does no good. I've tried making use of className, class, style (inline), but I'm certain I'm not doing something correctly. Material-ui has a demo illustrating how to change textfield styling on hover and focused at [https://codesandbox.io/s/p7uwn?file=/demo.js][1] where I have also tried changing the cursor to a pointer on hover but still no luck. Any assistance would be greatly appreciated.
import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '#material-ui/core';
const StyledTextField = styled(TextField)`
label.Mui-focused {
color: green;
}
.MuiOutlinedInput-root {
fieldset {
border-color: red;
}
&:hover fieldset {
border-color: yellow;
cursor: pointer !important;
}
&.Mui-focused fieldset {
border-color: green;
}
}
`;
export default function GlobalClassName() {
return (
<NoSsr>
<StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
</NoSsr>
);
}
Just a quick browser inspection gave the CSS component we need to target. It's
.MuiOutlinedInput-input
Just giving it a
cursor: pointer;
property will solve your problem.
Here is the code:
import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '#material-ui/core';
const StyledTextField = styled(TextField)`
label.Mui-focused {
color: green;
}
.MuiOutlinedInput-input {
cursor: pointer;
}
.MuiOutlinedInput-root {
fieldset {
border-color: red;
}
&:hover fieldset {
border-color: blue;
cursor: pointer;
}
&.Mui-focused fieldset {
border-color: green;
}
}
`;
export default function GlobalClassName() {
return (
<NoSsr>
<StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
</NoSsr>
);
}
Or just literally put cursor:pointer into its css, either in-line as <Component style={{cursor: 'pointer'}}> or <Component sx={{cursor: 'pointer'}}> or in its styled component css. This will automatically change your mouse onHover, and the top answer here is way over the top. Just add cursor: 'pointer' to the component's css.
Using
<TextField sx={{ cursor: 'pointer' }} />
did not work for me, instead, I needed to specify it as
<TextField sx={{ input: { cursor: 'pointer' } }}
which did affect the desired change.
Related
Here is my simple styled button
import styled from 'styled-components';
import Button from '#material-ui/core/Button';
import ArrowForwardIosIcon from '#material-ui/icons/ArrowForwardIos';
const MyButton = styled(Button)`
font-size: 11px;
`;
<MyButton
variant="outlined"
color="primary"
size="small"
disableElevation
endIcon={<ArrowForwardIosIcon />}
>
CLICK ME
</MyButton>
So how do I change endIcon size. I can change it in Chrome dev tool but have no idea what to add to MyButton definition. Assume it should be something like this in styled button definition:
&.MuiButtonendIcon {
color: green;
font-size: 15px;
}
you can style the individual endIcon by targeting the svg element and setting its font-size property like this
const MyButton = styled(Button)`
& .MuiButton-endIcon svg {
font-size: 50px;
color: green;
}
`;
I solved it this way:
const MyButton = styled(Button)`
*:first-of-type svg{
font-size: 50px;
color: green;
}
`;
After I click on the button, it has the animation around the button. So I want to turn it off, I try to set CSS for element and Pseudo-classes but it's not working.
.ant-switch,
.ant-switch:focus,
.ant-switch:active {
border-color: white !important;
box-shadow: none !important;
outline: unset;
}
My code:
import React from 'react';
import { Switch } from 'antd';
import styled from 'styled-components';
const RSwitch = styled(Switch)`
background-color: ${props => props.backgroundcolor};
.ant-switch-handle::before {
background-color: #9b9b9b;
right: 0;
}
&[aria-checked='true'] {
.ant-switch-handle {
::before {
background-color: ${props => props.color};
}
}
}
`;
export default function SwitchComponent({
onChange,
checked,
color = '#00afdb',
backgroundColor = ''
}) {
return (
<RSwitch
onChange={onChange}
checked={checked}
size="small"
color={color}
backgroundcolor={backgroundColor}
/>
);
}
ant switch picture
HTML of switch
I fixed it with this solution
create a button.less file in your ant overrides and put this inside
[ant-click-animating-without-extra-node='true']::after{display:none;}
and it will work like a charm.
I realize it is just a div tag so I don't display it. If everybody has a better solution, please let me know.
.ant-click-animating-node {
display: none;
}
.ant-btn {
&::after {
all: unset;
}
}
I am using styled components and Material UI and I can't figure out how to add on hover styles the MuiButton children. I've searched online and followed some of the docs, but I cannot seem to get it to take. I have my jsx setup like so:
<StyledMuiButton onClick={() => ()}>
<Svg />
<MuiTypography color={Color.gray} variant="caption">
Text
</MuiTypography>
</StyledMuiButton>
and the styled component set up like so:
const StyledMuiButton = styled(MuiButton)`
&& {
& .MuiButton-label {
flex-direction: column;
}
&:hover ${MuiTypography} {
color: ${Color.primary};
}
}
`;
Can anyone point me in the correct direction
Here's an example showing a couple ways of targeting elements within a button:
import React from "react";
import Button from "#material-ui/core/Button";
import Typography from "#material-ui/core/Typography";
import DoneIcon from "#material-ui/icons/Done";
import styled from "styled-components";
const StyledButton = styled(Button)`
& .MuiButton-label {
display: flex;
flex-direction: column;
}
&:hover {
color: red;
.MuiSvgIcon-root {
background-color: blue;
}
.MuiTypography-root {
color: green;
&:nth-of-type(2) {
color: purple;
}
}
}
`;
export default function App() {
return (
<div className="App">
<Button>Default Button</Button>
<StyledButton>Styled Button</StyledButton>
<StyledButton>
<DoneIcon />
<span>Styled Button</span>
<Typography>Typography 1</Typography>
<Typography>Typography 2</Typography>
</StyledButton>
</div>
);
}
This leverages the global class names applied to the elements which are documented in the CSS portion of the API page for each component (for instance the Typography documentation is here: https://material-ui.com/api/typography/#css). As a general rule the top-most element within a Material-UI component can be targeted via MuiComponentName-root (e.g. MuiTypography-root for Typography).
Is it possible to style Material-UI without using the makeStyles feature, for example, css? Just trying to understand how Material-UI style works.
The red style on the bottom is the style I'm trying to achieve with simple css here.
Below is an example of how to customize the various colors in an outlined select using simple CSS.
styles.css
.customSelect {
width: 200px;
}
.customSelect .MuiInputLabel-root {
color: red;
}
.customSelect .MuiInputBase-input {
color: green;
}
.customSelect .MuiOutlinedInput-notchedOutline {
border-color: red;
}
.customSelect:hover .MuiOutlinedInput-notchedOutline {
border-color: orange;
}
.customSelect
.MuiOutlinedInput-root.Mui-focused
.MuiOutlinedInput-notchedOutline {
border-color: purple;
}
.customSelectMenu .MuiMenuItem-root {
color: blue;
}
App.js
import React from "react";
import "./styles.css";
import TextField from "#material-ui/core/TextField";
import MenuItem from "#material-ui/core/MenuItem";
export default function App() {
const [value, setValue] = React.useState("");
return (
<TextField
className="customSelect"
label="Sale Type"
required
select
value={value}
onChange={event => setValue(event.target.value)}
variant="outlined"
SelectProps={{ MenuProps: { className: "customSelectMenu" } }}
>
<MenuItem value={1}>Sale Type 1</MenuItem>
<MenuItem value={2}>Sale Type 2</MenuItem>
</TextField>
);
}
Related answers:
Change border color on Material-UI TextField
Global outlined override
Change outline for OutlinedInput with React material-ui
I added an onClick function to the Card so you can go to the item detail view and read more and see more images. The onClick makes the text blue and gives it an underline. I overrode the blue text, but I cannot seem to remove the blue line when I hover.
Component:
import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle } from 'reactstrap';
import './ItemCard.css';
class ItemCard extends Component {
render() {
return (
<div>
<Card className="text-center item-card" onClick={this.props.clicked} >
<CardImg top width="100%" src={this.props.image} alt="Card image cap" />
<CardBody className="item-card-body">
<CardTitle>{this.props.title}</CardTitle>
<CardSubtitle>${this.props.price}</CardSubtitle>
<CardText>{this.props.description}</CardText>
</CardBody>
</Card>
</div>
);
}
}
export default withRouter(ItemCard);
Component CSS:
.item-card {
max-width: 20em;
flex: 1;
color: black;
}
.item-card :hover {
color: black;
text-decoration: none !important;
}
text-decoration no inheritable property and you need to set it to child elements directly:
.item-card {
max-width: 20em;
flex: 1;
color: black;
}
.item-card *:hover {
color: black;
text-decoration: none !important;
}