Stack Overflow
Stack Overflow

Questions tagged [sx]

19 questions
5
votes
1 answer

How to make a custom horizontal dashed divider in Material UI?

I have a divider template and I want to customize it by transforming it into a horizontal dashed divider. But I'm not sure how to override it, especially if I even do an sx edit by applying a borderRadius, it doesn't change the divider. source…
Ralph Henry
  • 122
  • 1
  • 13
4
votes
0 answers

MUI - extending sx props to memorize value and avoid rerenders

The sx prop from MUI is useful for speed and code readability (in reason) but it can cause many unnecessary re-renders (and this compounds with the sx lesser performance). So I was wandering if there was a way to add a useMemo wrapped version of the…
Clorofilla
  • 415
  • 2
  • 6
4
votes
2 answers

How to access theme within a breakpoint attribute in MUI 5?

I need to use my theme.spacing in my sm breakpoints, but no attempt is working. sx={{ paddingTop: { sm: 0 }, paddingRight: { sm: "spacing(6)" }, paddingBottom: { sm: "spacing(10)" }, paddingLeft: { sm: "theme.spacing(6)" }, "@media screen…
bonum_cete
  • 4,730
  • 6
  • 32
  • 56
3
votes
1 answer

Creating a grid with the box component and sx prop

In material UI v5 supposedly one can create almost anything with the sx prop, on the list is grid unfortunately I am unable to create what should be a simple grid. To illustrate here is what my grid would look like. My unsuccessful attempts at using…
Michael
  • 4,538
  • 5
  • 31
  • 58
2
votes
1 answer

Material UI v5.11 - Prop sx written twice in responsive

I received a React program with Material UI v5.11 and appears in it this instruction: and it seems working perfectly. But I am confused. Why the second sx? sx: 'column' Wouldn't it be right…
Kevin Flynn
  • 111
  • 5
2
votes
0 answers

Material ui breakpoints not working correctly in NextJs SSR

I am using Material ui sx styling with breakpoints, for example: Because I am using Nextjs and SSR…
Yuval Levy
  • 2,397
  • 10
  • 44
  • 73
1
vote
0 answers

If sx prop has such performance issues, should we use it sparingly ? And do dynamic and nested styles also impact it's performance?

As per an answer in this question https://stackoverflow.com/questions/71596050/why-is-the-sx-prop-so-much-slower#:~:text=The%20output%20of%20the%20work,in%20the%20end%20but%20does, sx prop's performance as compared to styled api decreases…
Dhiren Punjabi
  • 63
  • 1
  • 7
1
vote
0 answers

Use of "sx" prop in Material UI

What is the significance of sx prop here when you can write the styling outside it too. Here I noticed that whether I use the px tag inside sx or outside it, the result is the same. So, what is the importance of the sx prop here?
vasu.dev
  • 11
  • 2
1
vote
2 answers

Can I use an `sx` prop in a `styled` component

So my question really isn't should I, but rather can I. If I opt to use styled components for my more common components then I style them once and export. const MyBlueButton = styled('button')({ backgroundColor: 'blue' }) Great export that and I…
JeffBaumgardt
  • 1,378
  • 3
  • 16
  • 24
1
vote
2 answers

What is causing this Typescrip Error with SX prop

I got this example form here https://mui.com/system/the-sx-prop/ but I get this error from typescript. sx={(theme: Theme): SxProps | undefined => ({ ...theme.typography.body, color: theme.palette.primary.main, })} Type '(theme: Theme) =>…
user2411628
  • 97
  • 2
  • 9
0
votes
1 answer

Change fc-today background color

I've only found dated responses for this question. I'm trying to change the highlighted background for today. I have the component inside :
alpo
  • 19
  • 4
0
votes
2 answers

Chakra UI: how to make sx property apply only to selected breakpoints

What would be the best (I'd be interested even in 2nd best) approach to make a component define some sx style that applies only starting from particular breakpoint?
ksaveljev
  • 550
  • 2
  • 16
0
votes
0 answers

On first load, sx style props in mui is not getting applied in React app

I am trying to customize MUI component like below and importing it other part of my project. This not just happens with input field components, even applying sx on simple component like Box having same problem
K Shweta Kumari
  • 1
0
votes
0 answers

sx props in Material UI to support overall behavior and breakpoints in the same time

Is it possible in Material to have both global and also breakpoints CSS values at the same time? For example : sx={{margin:{sx:'1rem'}} is considered margin only when the breakpoint reaches 1rem but for other breakpoints use the default value. I…
sam
  • 23
  • 5
0
votes
2 answers

How to type object which contains string keys and values are MUI SX prop type

I want to make collection of all MUI(v5) sx props out side of component. like following const styles = { // HOW TO TYPE THIS VARIABLE sectionOne: { // type of SXProps }, // ... }; const Component: = () => { return ( <> …
Md. A. Apu
  • 769
  • 10
  • 30
1
2