I'm trying to create infinity rotating for an image (img tag) using built in styled component implementation from MUI (before it was implemented on external library).
Here is my fragment of code. If I'm running it I have an error.
export const SearchPreloaderContainerDiv = styled('div')({
margin: '0 auto',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flex: 1,
'& h4': {
margin: '50px 0 0 0',
color: '#282828',
fontFamily: 'Cuprum',
fontStyle: 'normal',
fontSize: '43px',
lineHeight: '70px',
},
'#keyframes loader': {
from: {
transform: 'rotate(0deg)',
},
to: {
transform: 'rotate(360deg)',
},
},
'& img': {
padding: '20px',
boxSizing: 'border-box',
animation: 'loader linear 3s infinite',
},
});
Before it was implemented using keyframes helper from external styled-componet library but now I can not find similar helper in MUI
Related
i'm using create-react-app and have a navbar that I would like to add a background image to. I have tried a couple different things like add the backgroundImage styling and adding an image tag but have not been able to make it work. The picture I am using is a .jpg and was downloaded from a stock image site. I added the image to my project by dragging it in and adding it to an images folder.
The current path from my header (what I called my navbar) file to my image is ../../images/pexels-kai-pilger-1341279.jpg
Here is my header file:
import React from 'react';
import { makeStyles } from '#material-ui/core';
import { ReactComponent as MenuLogo } from '../../images/menu-logo.svg';
const useStyles = makeStyles(theme => {
return ({
header: {
backgroundColor: '#d9d9d9',
boxShadow: '0rem 0rem 0rem 0.05rem #666666',
padding: '0rem 1rem 0rem 1rem',
position: 'relative',
width: '100vw',
height: 70,
zIndex: '100',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
backgroundImage: "url('SpaceLogo')"
},
headerActive: {
left: 352,
backgroundColor: '#d9d9d9',
boxShadow: '0rem 0rem 0rem 0.05rem #666666',
padding: '0rem 1rem 0rem 1rem',
position: 'relative',
width: '81.7%',
height: 70,
zIndex: '100',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
},
menuLogo: {
backgroundColor: '#d9d9d9',
border: 'none',
'&:hover': {
cursor: 'pointer'
}
},
});
});
function Header(props) {
const { toggleMenu, isMenuOpen } = props;
const classes = useStyles(props);
return (
<div className={ isMenuOpen ? classes.headerActive : classes.header } >
<button
className={classes.menuLogo}
onClick={() => toggleMenu()}>
<MenuLogo />
</button>
</div>
);
}
export default (Header);
I believe that is the only file that is needed for this question, but I can update if I need to add more info.
If I could get some help on how to get this set up, that would be great.
Bonus question: Is there a way for me to choose what part of the picture is visible in the navbar? For example, the image is a large square but my navbar is a thin rectangle. I would like to use the middle of the image as the background as opposed to the top.
header: {
backgroundColor: '#d9d9d9',
boxShadow: '0rem 0rem 0rem 0.05rem #666666',
padding: '0rem 1rem 0rem 1rem',
position: 'relative',
width: '100vw',
height: 70,
zIndex: '100',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
backgroundImage: `url(${SpaceLogo})`
},
This should be work
I need to use you for part of my project and I made a lot of changes to you as follows:
const GenderBoxStyle = styled(ToggleButtonGroup)(({ theme }) => ({
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'flex-start',
alignItems: 'center',
padding: 0,
gap: theme.spacing(3),
paddingLeft: theme.spacing(3),
border: 'unset !important',
'& .MuiToggleButtonGroup-grouped': {
border: '1px solid !important',
borderRadius: theme.spacing(2),
borderColor: 'unset',
color: theme.palette.text.primary,
},
}));
const ToggleButtonStyle = styled(ToggleButton)(({ theme }) => ({
color: theme.palette.text.primary,
px: 3,
cursor: 'pointer',
// outlineColor: theme.palette.grey[100],
// outlineWidth: '1px',
// outlineStyle: 'solid',
borderColor: theme.palette.grey[100],
border: '1px solid !important',
borderRadius: theme.spacing(2),
width: 168,
height: 48,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 0,
}));
But I want to change the color of the border as shown below, but it is not possible to use the border:
enter image description here
How can I give Togglebutton Border Colors in material ui?
In the GenderBoxStyle you can try to add MuiToggleButton-standard and set the color for this.
I provide the code snippet, you can try it.
Hope this can help you.
const GenderBoxStyle = styled(ToggleButtonGroup)(({ theme }) => ({
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'flex-start',
alignItems: 'center',
padding: 0,
gap: theme.spacing(3),
paddingLeft: theme.spacing(3),
border: 'unset !important',
'& .MuiToggleButtonGroup-grouped': {
border: '1px solid !important',
borderRadius: theme.spacing(2),
borderColor: 'unset',
color: theme.palette.text.primary,
},
'& .MuiToggleButton-standard': {
color: '#30a39c'
}
}));
Here is the result for changing the color of the border.
I'm using nextjs and Sass. All of my styles are worked fine but just when I'm using withStyles this warning appears
const LikeButton = withStyles((theme: Theme) => ({
root: {
color: "#666666",
fontSize: "1.3125rem!important",
fontWeight: 700,
maxWidth: "51px!important",
width: "51px!important",
minWidth: "51px!important",
backgroundColor: "#fcfbfa",
marginLeft: "1rem",
border: "1px solid #dcdcdc",
"& svg": {
fill: "currentColor",
color: "currentColor",
},
"&:hover": {
color: theme.palette.secondary.main,
backgroundColor: "#fcfbfa",
},
"&.Mui-disabled": {
backgroundColor: "#e6e6e6",
color: "#666666!important",
},
},
}))(Button);
I did all solutions mentioned in this link
https://www.mashen.zone/thread-3621719.htm
but didn't solve.
What exactly I want to do is to clip the background with only text using the CSS in Reactjs.
I have used Material UI for designing the page in react.
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles({
root: {
minWidth: 275,
},
loginCard: {
width: '100%',
height: '100vh',
display: 'grid',
placeItems: 'center',
},
emailInput: {
margin: '0px 0px 20px 0px'
},
actions: {
padding: '16px'
},
submitBtn: {
marginLeft: 'auto',
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 25,
textAlign: 'center',
fontWeight: 'bold',
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
'&::-webkit-background-clip': 'text',
'&:: -webkit-text-fill-color': 'transparent'
},
pos: {
marginBottom: 12,
},
})
export default useStyles;
how to add background-clip property using CSS in js using react material UI?
to add -webkit-background-clip css style you've to use WebkitBackgroundClip in cssJS.
WebkitBackgroundClip compiles down to -webkit-background-clip.
Here is the working example of clipping the background with only text using only CSS in js
import React from "react";
import "./styles.css";
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
body:{
background: 'black',
textAlign: 'center',
padding: '120px 20px',
width:'100vw',
height:'100vh'
},
heading:{
display: 'inline-block',
fontSize: '80px',
lineHeight: 0.9,
padding: '20px',
fontFamily: "'Syncopate', sans-serif",
textTransform: 'uppercase',
background: 'radial-gradient(circle farthest-corner at center center,white,#111) no-repeat',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent'
}
}));
export default function App() {
const classes = useStyles();
return (
<div className={classes.body}>
<h1 className={classes.heading}>mega<br/>fancy</h1>
</div>
);
}
codesandbox link:- https://codesandbox.io/s/competent-poincare-zx3lb
I've now been working in circles trying to understand what is happening. I'm making a design library using storybook with Tailwind. I can't seem to get the :before pseudo class to work. No matter where I place it in the styling, then it's never rendered.
An example is that I am trying to make a component which uses react-slick, and want to style the navigation:
'& .slick-dots': {
bottom: -30,
display: 'block',
left: 4,
listStyle: 'none',
margin: 0,
padding: 0,
position: 'absolute',
textAlign: 'center',
width: '100%',
'& li': {
cursor: 'pointer',
display: 'inline-block',
height: 20,
margin: '0 5px',
padding: 0,
position: 'relative',
width: 20,
'& button': {
border: 0,
background: 'transparent',
display: 'block',
height: 20,
width: 20,
outline: 'none',
lineHeight: 0,
fontSize: 0,
color: 'transparent',
padding: 5,
cursor: 'pointer',
'&:before': {
position: 'absolute',
top: 0,
left: 0,
content: '',
width: 20,
height: 20,
fontFamily: 'sans-serif',
fontSize: 20,
lineHeight: 20,
textAlign: 'center',
color: '#000000',
opacity: 0.75,
display: 'inline-block',
},
},
},
},
Found the problem. The :before pseudo class won't render unless there is content, but in the case of css in js, then content needs to look like this content: '"text"', and not content: 'text',
Another way is to define your content in the tailwind.config.js
theme: {
extend: {
content: {
'arrowNeonGreen': 'url("../src/images/icons/arrow-neon-green.svg")',
},
fontSize: {
...
You can render it using the following className. Make sure to include an inline-block and width.
<Link className="after:content-arrowNeonGreen after:inline-block after:w-8">Learn More</Link>
You can also apply a hover state like this hover:after:content-arrowNeonGreen
<Link className="hover:after:content-arrowNeonGreen after:content-arrowBlack after:inline-block after:w-8">Learn More</Link>
to get the :before class to work, you have to use tailwindcss-pseudo-elements package to customize your pseudo elements. check the docs below
https://www.npmjs.com/package/tailwindcss-pseudo-elements