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
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 use the material UI "createTheme" function. When ı write overrides for button and switch it's doesn't work. Material UI's None of the overrides features work but the theme palette, font-size working. Why it doesn't work? Thanks in advance.
// My overrides
overrides: {
MuiButton: {
primary: {
background: "pink",
},
sizeSmall: {
height: 22.5,
fontSize: 10,
padding: "0 15px",
},
sizeLarge: {
height: 37,
padding: "0 30px",
fontSize: 16,
},
text: {
background: "#1AD971",
borderRadius: 4,
border: 0,
color: "white",
padding: "0 22px",
height: 30,
textAlign: "center",
lineHeight: 1,
fontSize: 14,
fontWeight: 400,
"&:hover": {
backgroundColor: "#0BBF5D",
},
},
contained: {
backgroundColor: "#FFFFFF",
color: "#000000",
borderRadius: 30,
},
outlined: {
color: "#1AD971",
border: "1px solid #1AD971",
borderRadius: "15px",
},
},
MuiSwitch: {
switchBase: {
color: "#73889D",
},
colorSecondary: {
"&$checked": {
color: "#FFFFFF",
},
},
track: {
opacity: 1,
backgroundColor: "#213348",
"$checked$checked + &": {
opacity: 1,
backgroundColor: "#FFC231",
},
},
},
},
If you are working on MUI version 5, as mentioned in the comment above, you should be using the below code
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
border: '1px solid #ff4742',
background: 'white',
borderRadius: 12,
border: 0,
color: 'black',
height: 48,
padding: '0 30px',
fontWeight: 'bold',
boxShadow: '1px 2px 4px rgb(0 0 0 / 10%)',
}
}
},
}});
I'm trying to apply an animation to an arrow in a react component using JSS. I can't seem to get the keyframes correct and getting the error TypeError: container.addRule(...).addRule is not a function
const useStyles = createUseStyles({
'#keyframes sdb05': {
from: {
transform: 'rotate(-45deg) translate(0, 0)',
opacity: 0
},
to: {
transform: 'rotate(-45deg) translate(-20px, 20px)',
opacity: 1
}
},
arrow:{
animationName: '$sdb05',
zIndex: 2,
display: 'inline-block',
'-webkit-transform': 'translate(0, -50%)',
transform: 'translate(0, -50%)',
color: '#fff',
letterSpacing: '.1em',
textDecoration: 'none',
transition: 'opacity .3s',
width: 50,
height: 50,
backgroundColor: 'rgb(255,255,255, 0.5)',
borderRadius: '50%',
'&:after': {
position: 'absolute',
bottom: 0,
left: 0,
content: '',
width: '100%',
height: '80%',
background: '-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%)'
},
'& a': {
'& span':{
position: 'absolute',
top: 8,
left: '50%',
width: 24,
height: 24,
marginLeft: -12,
borderLeft: '2px solid #000',
borderBottom: '2px solid #000',
'-webkit-transform': 'rotate(-45deg)',
transform: 'rotate(-45deg)',
'-webkit-animation': 'sdb05 1.5s infinite',
'animation': 'sdb05 1.5s infinite',
boxSizing: 'border-box'
},
'&:hover': {
opacity: .5
}
}
}
});
const Arrow = () => {
const classes = useStyles();
return (
<div className={classes.arrow}>
<span></span>
</div>
);
};
How can I correctly set my keyframes to enable the animation?
The animation should function like this: link
If you are using JSS v10 or higher, the code you posted now is correct, you can see what is being generated in the browser and here https://cssinjs.org/repl
Now you have some problem with the actual animation, not with JSS.
Add the #keyframes on the top level, not inside of the rule
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