Is it possible to use MUI breakpoints with material-table? I want to change the styling of the search field in my material-table when above/below sm & md breakpoints.
This is my current styling for the search field. How can I add breakpoints to it?
// My global Breakpoints in App.js
const customTheme = createTheme({
breakpoints: {
values: {
xs: 501,
sm: 767,
md: 1024,
lg: 1365,
xl: 1583,
},
},
});
// Material-Table search field and styling in table.js
// I want to use this styling for search field
const useStyles = makeStyles((theme) => ({
sField: {
border: "1px solid #7E7E7E",
borderRadius: "2px",
[theme.breakpoints.up("md")]: {
paddingLeft: "20px",
width: "300px",
height: "40px",
},
[theme.breakpoints.down("sm")]: {
paddingLeft: "10px",
width: "200px",
height: "20px",
},
},
}));
// This styling is for search field
searchFieldStyle: {
border: "1px solid #7E7E7E",
borderRadius: "2px",
paddingLeft: "20px",
width: "300px",
height: "40px",
marginRight: "50px",
},
Related
I'm using MUI v5 to build linear progress bar.I have a scenario where if value in progress bar is 100%,I need to show tick icon at the end.The width of the bar with/without tick icon should be same,meaning icon shouldn't be placed after the bar.It should be at the end of bar.I tried with stylings and able to place tick icon at the end.But I'm unable to show the icon clearly as the bar overlaps with tick icon.
<div style={{ display: "flex", flexDirection: "row", position: "relative", alignItems: "center" }}>
<LinearProgress
variant="determinate"
sx={{
width: "100%",
borderRadius: "4px"
}}
value={50}
/>
<CheckCircleIcon sx={{ color: "blue" }} style={{ position: "absolute", width: "20px", display: "flex", justifyContent: "flex-end", right: "-2px", color: "#fff", fontWeight: "bold" }} />
</div>
Current Design
Expected Design
Here is a live demo where I've customized an MUI Slider with a checkmark SliderThumb.
The demo includes the foundation for using this as a progress bar:
Disable the slider to ignore user input. Keep in mind that disabling will change the color to gray. You can override disabled behavior through .Mui-disabled
Set the slider's value using a state variable that corresponds to your current progress
You may also choose to customize a LinearProgress component in the same way I've customized the Slider above. See the docs for LinearProgress customization.
Full slider code:
import * as React from 'react'
import Slider, { SliderThumb } from '#mui/material/Slider'
import { styled } from '#mui/material/styles'
import Box from '#mui/material/Box'
import CheckCircleIcon from '#mui/icons-material/CheckCircle'
const CheckMarkSlider = styled(Slider)(({ theme }) =>
({
color: '#3a8589',
height: 3,
padding: '13px 0',
'& .MuiSlider-thumb':
{
height: 20,
width: 20,
backgroundColor: '#fff',
border: '1px solid currentColor',
'&:hover': {
boxShadow: '0 0 0 8px rgba(58, 133, 137, 0.16)',
},
'& .checkmark-bar':
{
height: 9,
width: 1,
backgroundColor: 'currentColor',
marginLeft: 1,
marginRight: 1,
},
},
'& .MuiSlider-track':
{
height: 3,
},
'& .MuiSlider-rail':
{
color: theme.palette.mode === 'dark' ? '#bfbfbf' : '#d8d8d8',
opacity: theme.palette.mode === 'dark' ? undefined : 1,
height: 3,
},
}))
const CheckMarkThumbComponent = (props) =>
{
const { children, ...other } = props
return (
<SliderThumb {...other}>
{children}
<CheckCircleIcon />
</SliderThumb>
)
}
const CustomizedSlider = () =>
{
const [value, setValue] = React.useState(20)
React.useEffect(() =>
{
const intervalId = setInterval(() => setValue(Math.random() * 100), 500)
return () => clearInterval(intervalId)
}, [value])
return (
<Box sx={{ width: 320 }}>
<CheckMarkSlider
value = {value}
disabled
components={{ Thumb: CheckMarkThumbComponent }} />
</Box>
)
}
export default CustomizedSlider
I need to change fonsize accourding to screensize with tailwind css. Is there a way to define fontsizes according to screen in tailwind.config and apply them to all text?
Normally i can create custom fontsize and apply in text element.
Define custom fontsize in tailwind.config:
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
fontSize: {
xs: "10px",
s: "15px",
sm: "17px",
"2sm": "20px",
m: "22px",
md: "25px",
l: "30px",
xl: "35px",
"2xl": "40px",
"3xl": "45px",
"4xl": "50px",
"5xl": "55px",
"6xl": "60px",
"7xl": "65px",
"8xl": "70px",
},
}
}
using it in text element:
<div className="text-s md:text-m xl:text-xl">Text</div>
in order to avoid applying resposive text size for every text element i need it change fontsize value automatically. Maybe it will look like so in tailwind.config:
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
fontSize: {
screen: {
lg: {
xs: "10px",
s: "15px",
sm: "17px",
"2sm": "20px",
m: "50px",
md: "25px",
},
md: {
xs: "5px",
s: "7px",
sm: "10px",
"2sm": "15px",
m: "17px",
md: "20px",
},
},
},
}
};
or do i have to apply responsize fontsize for every text?
I'm a newbie to MUI/react and I've been trying to place an Icon button beside my input base form, however I'm struggling to make it so that the input form consumes all the available space in my search div. Instead my search icon wrapper is the one that takes majority of the space. I'm really confused what I'm doing wrong, Can someone please shed some light on me?
Here's my code:
import * as React from "react";
import { styled } from "#mui/material/styles";
import Box from "#mui/material/Box";
import InputBase from "#mui/material/InputBase";
import SearchIcon from "#mui/icons-material/Search";
import IconButton from "#mui/material/IconButton";
const Search = styled("div")(({ theme }) => ({
display: "flex",
position: "relative",
borderRadius: 30,
backgroundColor: "#ffffff",
border: "1px",
borderStyle: "solid",
borderColor: "#55597d",
// marginLeft: 10,
width: "auto",
".MuiInputBase-root": {
width: "100%",
},
}));
const SearchIconWrapper = styled("div")(({ theme }) => ({
padding: theme.spacing(0, 2),
height: "100%",
// position: 'absolute',
// pointerEvents: 'none',
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
// backgroundColor: 'black',
width: "100%",
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: "inherit",
"& .MuiInputBase-input": {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(0)})`,
paddingRight: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create("width"),
width: "100%",
},
}));
export default function SearchAppBar({
searchQuery,
setSearchQuery,
clearGenre,
onDropDownChange,
}) {
return (
<Box sx={{ flexGrow: 1 }}>
<Search
sx={{
width: { xs: "90vw", md: "50vw", lg: "30vw" },
margin: "auto",
marginBottom: "20px",
}}
>
<form action="/" method="get">
<StyledInputBase
defaultValue={searchQuery}
// placeholder="Search All Games…"
inputProps={{ "aria-label": "search" }}
type="search"
name="s"
id="site-search"
/>
</form>
<SearchIconWrapper>
<IconButton>
<SearchIcon style={{ color: "#55597d" }} />
</IconButton>
</SearchIconWrapper>
</Search>
</Box>
);
}
You need to remove the width: 100% in the SearchIconWrapper on the right first. And because the Search component is a flex container, you also need to add flexGrow: 1 to the first child (the form) so it can expand to fit the parent and push the icon to the far right:
const Search = styled("div")(({ theme }) => ({
display: "flex",
position: "relative",
borderRadius: 30,
backgroundColor: "#ffffff",
border: "1px",
borderStyle: "solid",
borderColor: "#55597d",
// marginLeft: 10,
// ---------------------------------- add the following styles
"& :first-child": {
flexGrow: 1
}
width: "auto",
".MuiInputBase-root": {
width: "100%"
}
}));
const SearchIconWrapper = styled("div")(({ theme }) => ({
padding: theme.spacing(0, 2),
height: "100%",
// position: 'absolute',
// pointerEvents: 'none',
display: "flex",
alignItems: "center",
justifyContent: "flex-end"
// backgroundColor: 'black',
// -----------------------------------> comment this line: width: "100%"
}));
I have the following issue. I'm using Material-UI Autocomplete in my project. I made some alterations so the font and the component resize when the viewport changes size. Thus I've used vw on widths,heights and font-sizes. However, as you can see in the gif bellow, when I resize the gap between the green sauce and the blue/red spaces increases. how can I make sure that the gap also follows the initial proportion? So basically what I would like is that the whole component shrunk and the gap didn't increase. I've been altering all kinds of heights/margins but I can't seem to solve the issue. You have all the code available on the following sand box.
https://2y3jh.csb.app
You need to alter the input height to 3vw so that the height is consistent.
import TextField from "#material-ui/core/TextField";
import Autocomplete from "#material-ui/lab/Autocomplete";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
input: {
width: "100%",
height: "3vw", // Changed from 2vw
fontSize: "1.25vw",
color: "#02112E",
backgroundColor: "green"
},
option: {
fontSize: "0.8vw",
height: "3vw",
width: "100%",
color: "#02112E"
},
noOption: {
fontSize: "0.8vw",
height: "3vw",
width: "100%",
color: "#02112E"
},
root: {
"& label + .MuiInput-formControl": {
marginTop: "1vw"
},
"& label.Mui-focused": {
color: "#02112E",
fontSize: "0.97vw"
},
"& .MuiInput-underline:after": {
borderBottomColor: "#02112E",
borderBottomWidth: "0.21vw",
left: "0",
transformOrigin: "left center",
transition: "all 0.3s ease"
},
"& .MuiInput-underline:before": {
borderBottomColor: "#02112E",
borderBottomWidth: "0.07vw"
},
"& .MuiInput-underline:hover::before": {
borderBottomColor: "#02112E",
borderBottomWidth: "0.07vw"
},
fontSize: "1.25vw",
width: "100%",
height: "3vw",
backgroundColor: "red"
},
inputRoot: {
color: "#02112E",
fontSize: "1.25vw",
backgroundColor: "blue",
transform: "translate(0, 2vw) scale(1)"
}
});
export default function StyledAutoComplete() {
const classes = useStyles();
return (
<Autocomplete
style={{ width: "60%" }}
options={list}
classes={{
root: classes.root,
option: classes.option,
noOptions: classes.noOption,
input: classes.input
}}
disableClearable
freeSolo
noOptionsText={"No Options"}
autoHighlight
getOptionLabel={(option) => option.title}
renderOption={(option) => <React.Fragment>{option.title}</React.Fragment>}
renderInput={(params) => (
<TextField
style={{ width: "100%" }}
{...params}
label="Option"
variant="standard"
inputProps={{
...params.inputProps,
autoComplete: "new-password" // disable autocomplete and autofill
}}
InputLabelProps={{
classes: {
root: classes.inputRoot
}
}}
/>
)}
/>
);
}
const list = [{ title: "opt 1" }, { title: "opt 2" }];
Demo: https://2zh36.csb.app/
Output:
The image above is how my header normally looks, the image below is what happens when I start to shrink the window size.
What CSS can I use to stop the Text navLinks to stop wrapping like that?
Here is the CSS I use:
const useStyles = makeStyles((theme) => ({
// appBar is the CSS for the material-UI component
appBar: {
borderBottom: `1px solid ${ theme.palette.divider }`,
flexGrow: 1,
"#media (max-width: 1000px)": {
paddingLeft: 0,
}
},
// toolBar is the CSS wrapper for all <divs> inside the appBar
toolBar: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "0.5rem 0.5rem 0.5rem 1rem",
},
// LOGO text
toolbarTitle: {
flexGrow: 1,
fontFamily: 'Track',
textAlign: "left",
margin: "0.5rem",
paddingLeft: "100px",
"#media (max-width: 1000px)": {
marginLeft: "20px",
paddingLeft: 0,
}
},
// Here are my navLinks that are wrapping and causing the problem.
navLinks: {
fontWeight: 700,
size: "18px",
marginLeft: "70px",
padding: "0 1rem",
float: "center",
whiteSpace: "nowrap",
overflow: "hidden",
display: "inline-block",
},
Thank you for the help!
for example
#media (max-width: 700px)": {
navlinks{margin-left: 30px,}
}
You can use media queries, size is % and inline blocks.