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;
}
}
Related
I am new to React and being held back by a seemingly simple task.
I've got a Header component nested within which is a HamburgerButton component. Clicking the latter should make a sidenav appear but for now I would like the icon to change from the 'hamburger' to the big 'X'.
Here is my parent component:
import { MyMoviesLogo } from 'components/Icons';
import HamburgerButton from 'components/HamburgerButton/HamburgerButton';
import styles from './Header.module.css';
const Header = (): JSX.Element => {
const [isActive, setIsActive] = useState(false);
return (
<header className={styles.header}>
<MyMoviesLogo className={styles.headerIcon} />
<HamburgerButton
isActive={false}
/>
</header>
);
};
export default Header;
And here is the HamburgerButton
import styles from './HamburgerButton.module.css';
type HamburgerButtonProps = {
isActive: boolean;
onClick?: () => void;
};
const addMultipleClassNames = (classNames: string[]): string => classNames.join(' ');
const HamburgerButton = ({ isActive, onClick }: HamburgerButtonProps): JSX.Element => {
return (
<div className={isActive ? addMultipleClassNames([styles.hamburger, styles.active]) : styles.hamburger} onClick={onClick}>
<div className={styles.bar}></div>
<div className={styles.bar}></div>
<div className={styles.bar}></div>
</div>
);
}
export default HamburgerButton;
Here's my HamburgerButton.module.css file:
.hamburger {
cursor: pointer;
display: block;
width: 25px;
}
.bar {
background-color: var(--hamburger-button-global);
display: block;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
width: 25px;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
Manually changing the isActive prop to false verifies that the styling is applied as required.
My question is, how could I make it so when I click the icon its state gets toggled? I am familiar with React hooks like useState but can't quite put something together.
Any help would be greatly appreciated.
Thank you.
P.S.: It's probably obvious but I am using TypeScript.
You should use your onClick prop from your <HamburgerButton /> to change the parent state.
<HamburgerButton isActive={isActive} onClick={() => { setIsActive(oldState => !oldState) } />
I came across the error in styled-components :
Over 200 classes were generated for component......
and did the suggested fix from console, and that did the trick, but when I have a container component "Card" that when hovered should change text color of another component "Number" (which has that suggested fix applied, then I cant change the color (i assume because style overrides the hover change, because it works fine with opacity)
the mentioned components are in src/ProgressPieCard (first 2 components)
anyone got any got suggestions, thanks in advance :)
( sorry styling/position is a bit off )
CodeSandBox
const Number = styled.p.attrs<ColorProps>((props) => ({
style: {
color: props.color,
},
}))`
position: absolute;
span {
font-size: 1.5rem;
}
`;
const Card = styled.div.attrs<ColorProps>((props) => ({
style: {
background: props.color,
},
}))`
position: relative;
&:hover {
${Number} {
opacity: 0.5;
// color: red; <-- this dont work
}
}
`;
Values from props were pass as inline styles. They have higher priority. I suggest passing values from props differently. The example below will now work as you wanted.
const Number = styled.p<ColorProps>`
position: absolute;
color: ${p => p.color};
span {
font-size: 1.5rem;
}
`;
const Card = styled.div<ColorProps>`
position: relative;
background: ${p => p.color};
&:hover ${Number} {
opacity: 0.5;
color: red; <-- this WILL work :)
}
`;
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.
i created a basic react app like this:
import React from 'react';
import style from './Button.module.scss';
export default class Button extends React.Component {
render() {
return (
<button className={[style.class, 'awesome', 'great'].join(' ')}>
hello world
</button>
);
}
}
the css/scss:
.class {
background: pink;
color: red;
/* not working */
&:is(.awesome) {
border-width: 2px;
}
/* not working either */
&.awesome {
border-width: 2px;
}
/* works */
&:not(.great) {
border-style: dotted;
}
}
the problem:
the sublass .awesome is not working, whereas .great works fine.
Can you fix the code so the .awesome will work.
I need some subclass of the .button, so i can toggle them at runtime.
this is the generated css on the browser,
the .awesome is not generated but .great generated.
.Button_class__1tDJY:not(.Button_great__3yeAv) {
border-style: dotted;
}
.Button_class__1tDJY {
background: pink;
color: red;
}
you should pass the classes declared at your css modules through your styles object, instead of passing a string:
<button className={[styles.class, styles.awesome, styles.great].join(' ')}>
hello world
</button>
Hey how can I align text inside SnackBar to be center?
this is my code and it doesn't work:
import { Injectable } from '#angular/core';
import { MatSnackBar, MatSnackBarConfig } from '#angular/material';
#Injectable({
providedIn: 'root'
})
export class MaterialService {
constructor(public snackBar: MatSnackBar) { }
openSnackBar(message:string){
let config = new MatSnackBarConfig();
config.panelClass = 'text-align:center';
this.snackBar.open(message);
}
}
thanks you :)
Simply add this in your style.css (or any global css, in my case I put it in my app.component.scss)
margin:auto; will center the span tag inside the snackBar
text-align:center; will center the text inside the span
simple-snack-bar span {
margin:auto;
text-align: center;
}
Settings like this will apply to all your SnackBars.
For angular 7 w/material, I use this in global style.css:
.mat-simple-snackbar span {
margin: auto;
text-align: center;
}
The panelClass property of MatSnackBarConfig accepts a CSS class which you can define in your main app's styles.css:
openSnackBar(message: string) {
let config = new MatSnackBarConfig();
config.panelClass = 'center-snackbar';
this.snackBar.open(message);
}
Just make sure you use the !important selector as well!
.center-snackbar {
text-align: center !important;
}
For on demand centred text.
SASS:
snack-bar-container.text-center {
span {
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
Then you add "text-center" to your panelClass
let config = new MatSnackBarConfig();
config.panelClass = "text-center";
this.snackBar.open(message);
That way you can have standard appearance if the Snackbar comes with an action.
Try this
import { Injectable } from '#angular/core';
import { MatSnackBar, MatSnackBarConfig } from '#angular/material';
#Injectable({
providedIn: 'root'
})
export class MaterialService {
horizontalPosition: MatSnackBarHorizontalPosition = 'center';
verticalPosition: MatSnackBarVerticalPosition = 'top';
constructor(public snackBar: MatSnackBar) { }
openSnackBar(message:string){
let config = new MatSnackBarConfig();
config.verticalPosition = this.verticalPosition;
config.horizontalPosition = this.horizontalPosition;
this.snackBar.open(message);
}
Ref:https://material.angular.io/components/snack-bar/api
Example:https://stackblitz.com/edit/angular-snackbar
Although this question is quite old, I thought posting my solution might be helpful to someone out there.
After lots of research and some trial and error, the below code is all I needed to get my snackbar working with centered text. (hint: I'm using the most stable Angular version as at today).
// extract from my-notification-service.ts file
// Note that I created the above service file, imported "MatSnackBar"
// & "MatSnackBarConfig" from #angular/material/snack-bar,
// and added a property of type "MatSnackBar" into the constructor.
// After that, I created the below object and function.
// The function will be called by any submit button in the project.
mySnackBarConfig: MatSnackBarConfig = {
duration: 3000,
horizontalPosition: 'center',
verticalPosition: 'bottom'
}
displayMessage(msg: string) {
this.mySnackBarConfig['panelClass'] = ['notification','success'];
this.snackBar.open(msg, '', this.mySnackBarConfig);
}
The following code was added to the global styles.css file
// extract from styles.css (global)
snack-bar-container.success {
background-color: rgb(31, 121, 39);
color: rgb(255, 255, 255);
}
snack-bar-container.notification simple-snack-bar {
font-size: 18px !important;
}
// this part is all I did to center the text.
// Take note of the css declaration, not just the style inside.
simple-snack-bar > span {
margin: 0 auto;
text-align:center !important;
}