I'm working with Chakra UI and i needed to customize the scrollbar style using the css pseudo element ::-webkit-scrollbar, but Chakra UI doesn't seen to have this pseudo element and a I don't know where I can style this specific component without creating a global css class.
Here is a sample of my code:
<Box
overflowX="auto"
maxW="100vw"
h="100%"
whiteSpace="nowrap"
pb="17px"
color="white"
px="32px"
// the ::-webkit-scrollbar property should goes here
>
<!-- content -->
</Box>
Try css prop:
<Box
overflowY="auto"
css={{
'&::-webkit-scrollbar': {
width: '4px',
},
'&::-webkit-scrollbar-track': {
width: '6px',
},
'&::-webkit-scrollbar-thumb': {
background: scrollbarColor,
borderRadius: '24px',
},
}}
>
Use Chakra sx prop here.
<Box
overflowX="auto"
maxW="100vw"
h="100%"
whiteSpace="nowrap"
pb="17px"
color="white"
px="32px"
sx={
{
'::-webkit-scrollbar':{
display:'none'
}
}
}
>
<!-- content -->
</Box>
To know more about Chakra sx prop, refer docs
its not gonna work with just css you need to __css
<Box
overflowY="auto"
__css={{
'&::-webkit-scrollbar': {
w: '2',
},
'&::-webkit-scrollbar-track': {
w: '6',
},
'&::-webkit-scrollbar-thumb': {
borderRadius: '10',
bg: `gray.100`,
},
}}
>
It worked for me you can use overflow="scroll" and with this the prop sx={}
<Flex
mt="20px"
overflow="scroll"
sx={{
"::-webkit-scrollbar": {
display: "none",
},
}}
/>
Related
I can do the following in pure HTML/CSS
<div color="red">
red
</div>
<div color="yellow">
yellow
</div>
div[color="red"] {
color: red;
}
div[color="yellow"] {
color: yellow;
}
However, using React and TypeScript, I want to do something like this:
const Colored = ({ color }: { color: "yellow" | "red" ) => (
<div color={color}>
{ color }
</div>
);
However, I can't add abritrary props to div!!
so we could do exactly the same as the above, but instead
<Colored color="red" />
<Colored color="yellow" />
How can I do something like this? Additionally, should I even be doing this? Is there a better way of doing this in React?
In this case using the type React.HTMLAttributes<HTMLDivElement> you can pass additional properties to the DIV mantaining your component Colored.
type IColoredProps = { color: "yellow" | "red" } & React.HTMLAttributes<HTMLDivElement>
const Colored: FC<IColoredProp> = (props) => (
<div {...props}>
{props.color}
</div>
);
Now the color is mandatory and can only be "red" or "yellow", and you can pass the rest of properties a normal div can have.
<Colored style={{ fontSize: "25px" }} color="red"/>
I created a codeSandBox example for you :
instead of <Colored text="red" /> you should use <Colored color="red" />
I've been struggling to change the background color of the NextUI navbar. I'm using NextUI's navbar component in my react js project. I suppose there is some property / attribute for that but even after researching quite a lot, I'm not aware of it. Please help me.
import { Navbar, Input } from "#nextui-org/react";
import { SearchIcon } from "./SearchIcon.js";
import './Header.css'
function Header() {
return (
<Navbar isBordered variant="sticky">
<Navbar.Brand css={{ mr: "$4" }}>
<h5>ABC</h5>
</Navbar.Brand>
<Navbar.Content
css={{
"#xsMax": {
w: "70%",
jc: "space-between",
},
}}
>
<Navbar.Item
css={{
"#xsMax": {
w: "100%",
jc: "right",
},
}}
>
<Input
clearable
contentLeft={
<SearchIcon fill="var(--nextui-colors-accents6)" size={16} />
}
contentLeftStyling={false}
css={{
w: "100%",
"#xsMax": {
mw: "300px",
},
"& .nextui-input-content--left": {
h: "100%",
ml: "$4",
dflex: "center",
},
}}
placeholder="Search"
/>
</Navbar.Item>
</Navbar.Content>
</Navbar>
);
}
export default Header;
Background color and background blur color are applied in the div with class nextui-navbar-container, which, as I understood, appears there automatically and you can't affect it directly as an component. But you can override css class nextui-navbar-container, or you can use css variables --nextui--navbarBackgroundColor and --nextui--navbarBlurBackgroundColor in the css property of Navbar component like this:
<Navbar css={{
$$navbarBackgroundColor: "transparent",
$$navbarBlurBackgroundColor: "transparent"
}}>
I want to implement grid system from material-ui but facing a problem. Resizing the browser window has no effect on my grid items - they don't resize. I found out that this problem is caused by a parent div which has the style property "display": "flex".
I'm using a material-ui app-bar and drawer. Further I've built a reuseable container component for all the content and childrens. Without the style property "display": "flex" my whole page style gets broke. So how can I solve this? Any Idea?
Here is my code and the class root with the property "display": "flex"
Container.tsx
return (
<div className={classes.root}>
<TopBar /> // Material-UI AppBar
<Drawer /> // Reuseable Drawer Component
<main className={classes.contentContainer}>
<div>{children}</div>
</main>
</div>
);
Container Styles
const useStyles = makeStyles((theme: Theme) =>
createStyles({
contentContainer: {
flexGrow: 1,
marginTop: 63,
position: 'relative',
backgroundColor: colors.whiteB_8,
height: `calc(100vh - 63px)`,
// padding: theme.spacing(3),
'& > div:first-child': {
padding: `calc(${theme.spacing(1)}px + 35px)`,
},
},
root: {
display: 'flex',
},
}),
);
Then I can pass any component to this Container. Here my example component, where I want to have 3 columns inside my content container:
return (
<Grid container item xs={12} spacing={2}>
<Grid item xs={4}>
<Paper
style={{ backgroundColor: 'grey' }}
>
Test
</Paper>
</Grid>
<Grid item xs={4}>
<Paper
style={{ backgroundColor: 'grey' }}
>
Test
</Paper>
</Grid>
<Grid item xs={4}>
<Paper
style={{ backgroundColor: 'grey' }}
>
Test
</Paper>
</Grid>
</Grid>
);
The output looks like this:
And the items are not resized:
If I remove "display": "flex" it looks like this - the content is below the drawer:
I can't specifically recreate your issue, but I have a feeling if you add width: '100%' with the display: 'flex' that you say is breaking, it may help with the resizing, as currently the flexbox has no defined width, and so it is just going to shrink and fit to the components inside of it, but not shrink any further when you make the window smaller. As long as you define the width as some relative amount, either % or vw, it should shrink the content inside.
I am working on a project in which i need to write a number over a icon.
I am using MaterialUI ModeComment icon and i want to write some text over it .
I tried the following things but didn't worked .
<ModeComment color='primary'>
<Typography>2</Typography>
</ModeComment>
<ModeComment color='primary'>
<span>2</span>
</ModeComment>
How can I do this? Thanks in Advance
Unfortunately, passing a children prop like you did will not work for material-ui's Icon component. It expects the children to be the name of the icon font ligature.
A possible solution would be to create a custom component for your requirements - a ModeCommentIconWithNumber component maybe? Then it would have predefined styles to position its icon and number elements.
Below code would help you achieve what you want. You could modify this component, like accepting an icon prop to render or maybe a color prop that defines the color of the icon.
...
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
root: {
position: "relative",
display: "inline-flex",
justifyContent: "center",
alignItems: "center"
},
icon: {
fontSize: "2.5em"
},
count: {
position: "absolute",
lineHeight: 1,
color: "#fff",
top: "0.5em",
fontSize: "1em"
}
});
function ModeCommentIconWithNumber({ size = 16, count = 0 }) {
const classes = useStyles();
return (
<div className={classes.root} style={{ fontSize: size }}>
<ModeCommentIcon color="primary" className={classes.icon} />
<Typography component="span" className={classes.count}>
{count}
</Typography>
</div>
);
}
You can use Badge of material ui. link
<Badge
badgeContent={4}
anchorOrigin={{
vertical: 'center',
horizontal: 'center',
}}
color="white">
<ModeComment />
</Badge>
Ciao, there is no way to put text in icon (like a child as you did). You could put Typography outside the icon and use some css. Something like:
const styles = {
typography: {
color: "white",
fontSize: 13,
position: "absolute",
top: "1.2%",
left: "2%"
}
};
function TextIcon() {
return (
<div>
<Typography style={styles.typography}>2</Typography>
<ModeComment color="primary" />
</div>
);
}
Here a codesandbox example.
I don't think Mui provide such customization. You could write text in parallel to icon and align it over the top of it using absolute position.
I am trying to design a custom accordion with these fancy red lines connecting parent and children (see photo).
I am using Grommet components here but in summary, the layout it's just a bunch of divs (the Box tag) and a collapsible panel component for the children(the Collapsible tag). Children panels can be opened and show more content.
After a couple of tries, what I did to connect parent and children is to wrap the outer box with a left-border and then remove the extra border on the bottom using a white box on top of it (the Stack tag of the second example code). The horizontal line connecting the card and the left-border is just a styled div placed next to the Child tab ( inside the SubMenuElement component ).
I think this is quite an intricate solution ( also because I need to make the white box responsive ) but I couldn't think about a simpler one.
Do you have any suggestion on how can I improve or re-do the red connections?
Thanks in advance for the help!
Please note that I am aware all the panels are using the same variables on click
<MenuButton
open={openMenu}
label="PARENT TAB-XYZ"
onClick={() => {
const newOpenMenu = !openMenu;
setOpenMenu(newOpenMenu);
setOpenSubmenu1(!newOpenMenu ? false : openSubmenu1);
}}
/>
<Collapsible open={openMenu}>
<Box background="antiquewhite" margin={{ left: 'small' }} border={{ side: 'left', size: '2px', color: 'red' }}>
{Tabs.map(el => {
return (
<SubMenuElement
key={el.title}
open={openSubmenu1}
label={el.title}
onClick={() => setOpenSubmenu1(!openSubmenu1)}
/>
);
})}
</Box>
</Collapsible>
<MenuButton
open={openMenu}
label="PARENT TAB-POU"
onClick={() => {
const newOpenMenu = !openMenu;
setOpenMenu(newOpenMenu);
setOpenSubmenu1(!newOpenMenu ? false : openSubmenu1);
}}
/>
<Collapsible open={openMenu}>
<Stack anchor="bottom-left">
<Box
background="antiquewhite"
margin={{ left: 'small' }}
border={{ side: 'left', size: '2px', color: 'red' }}
>
{Tabs.map(el => {
return (
<SubMenuElement
key={el.title}
open={openSubmenu1}
label={el.title}
onClick={() => setOpenSubmenu1(!openSubmenu1)}
/>
);
})}
</Box>
<Box background="white" height="39px" width="35px"></Box>
</Stack>
</Collapsible>
</Box>
);
Based on one of my answer for someone who needed a divider, I can propose you something like that: repro on Stackblitz
You will find the original divider code on the first link. for your needs, i modified it a little so it just add the link on the left of the content. There is still a border-left on the content wrapper tho, it seems the easiest solution for me.
Your main file :
import React, { Component } from "react";
import { render } from "react-dom";
import Divider from "./divider";
import "./style.css";
const App = () => {
const toggleAccordion = e => {
e.target.classList.toggle("hidden");
};
return (
<>
<div className="accordion hidden" onClick={toggleAccordion}>
accordion header
<div className="accordion-content-wrapper">
<Divider>
<div>Content</div>
</Divider>
<Divider>
<div>Content</div>
</Divider>
<Divider>
<div>Content</div>
</Divider>
</div>
</div>
</>
);
};
render(<App />, document.getElementById("root"));
My accordion css (your component already have this feature i guess, i just made a minimal reproduction):
.accordion.hidden {
height: 18px;
overflow: hidden;
}
.accordion-content-wrapper{
margin-left: 10px;
border-left: 1px solid black;
}
And for the divider, there not a lot of change from my original answer, here is the code:
import React from 'react';
const Divider = ({ children }) => {
return (
<div className="divider-component">
<div className="container">
<div className="border" />
<span className="content">{children}</span>
</div>
</div>
);
};
export default Divider;
css:
.divider-component .container{
display: flex;
align-items: center;
}
.divider-component .border{
border-bottom: 1px solid black;
width: 15px;
}
.divider-component .content {
width: 100%;
}
Even if you'll have to edit it to fit your needs, the idea is to add a flex container so you can add the little link on the left of your content, correctly aligned with your content.
For whoever will encounter the same issue, I ended up using two 50% height flexboxes inside a div that replace the horizontal line. This allows managing the responsive resize automatically while giving flexibility on the last item border.
const SubMenuElement = ({ last, label, open, onClick }: { last?: boolean; label: string; open: any; onClick: any }) => {
return (
<Box direction="row">
<Line last={last} />
<Box width="100%" margin={{ vertical: 'small' }}>
<Card background="white" onClick={onClick}>
....
</Card>
</Box>
</Box>
);
};
Where the Line is
const Line = ({ last }: { last?: boolean }) => (
<Box direction="column" width="20px" flex="grow">
<Box height="50%" style={{ borderLeft: '1px solid red', borderBottom: '1px solid red' }} />
<Box height="50%" style={last ? {} : { borderLeft: '1px solid red' }} />
</Box>
);