What is the best way to apply styles based on specific screen widths while still having default styles for other screen sizes?

Here is the code snippet I am working with:

<TableCell sx={{ borderBottom: { xs: 0, lg: 1 } }}>
    <Typography variant="body2">{account.name} ({account.currency})</Typography>
</TableCell>

I am facing an issue where the custom styling overrides the default styling on large screens:

/*border-bottom: 1px solid rgba(224, 224, 224, 1);*/

The custom styling is as follows:

border-bottom: 1px solid;

I want to revert back to the default styling on large screens without specifying a specific borderBottomColor. Is there a way to achieve this by adjusting the sx property? Any guidance on this topic would be greatly appreciated.

Unfortunately, the documentation does not provide much information about this https://mui.com/system/getting-started/the-sx-prop/

cssreactjsmaterial-ui

Answer №1

The breakpoints object syntax specifically deals with defining styles for larger screen sizes as per the documentation:

Breakpoints as an object

One way to handle breakpoints is by creating an object with breakpoint values serving as keys. It's important to note that each property defined for a particular breakpoint also applies to all subsequent larger breakpoints in the series. In simpler terms, setting width: { lg: 100 } is the same as calling theme.breakpoints.up('lg').

Unfortunately, the border utilities API does not support detailed border CSS properties like borderBottomWidth (at least not directly).

If you need to customize styles for smaller screens or when going "down" in size, you may have to create your own logic using the theme breakpoints utility functions within the sx prop. For instance:

<TableCell
  sx={(theme) => ({
    [theme.breakpoints.down("md")]: {
      borderBottom: "none"
    }
  })}
>
  My cell title
</TableCell>

See working example on CodeSandbox: https://codesandbox.io/s/mui-breakpoints-in-sx-dz2whq?file=/demo.tsx

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering issues with Jest Setup in Next.js as it appears to unexpectedly include a React import in index.test.js

Hey there, I've been pondering over this issue for the past few days. It appears to be a common error with multiple solutions. I'm facing the dreaded: Jest encountered an unexpected token /__tests__/index.test.js:16 import React from "r ...

javascriptreactjsjestjsnext.js

Even if I were to return a Promise.reject, Redux Thunk still remains "fulfilled"

I've been using Redux for a short while and I'm facing some challenges with a Thunk response... Within my slice, I am invoking an asynchronous function called "handleBoxDeliveryAsync" extraReducers: (builder) => { builder .addCase ...

reactjsnext.jsreduxredux-toolkitredux-thunk

What is the process for adding CSS to a Zend project?

I am encountering an issue with appending images or CSS files in my Zend project. I have placed my CSS file in the following directory: project/public/css/style.css Unfortunately, when attempting to include this CSS file on my page, it does not work as e ...

cssimagezend-framework

The displayed value in the text field remains constant even when the object's attribute is modified

My issue involves the Date Text Field component of Material UI. Whenever I pass an attribute from an object, the displayed value in the Text Field does not update even when the object attribute changes. const [data, setData] = useState({ title: new Da ...

javascriptreactjsmaterial-ui

How can I adjust the border width of outlined buttons in material-ui?

Currently, I am in the process of modifying a user interface that utilizes Material-UI components. The task at hand involves increasing the thickness of the borders on certain outlined buttons. Is there a method through component props, themes, or styles t ...

javascriptreactjsmaterial-ui

What could be the reason that a MUI component does not disappear when the display is set to none in the sx prop?

I'm attempting to construct a responsive side drawer using MUI's Drawer component in React, specifically leveraging MUI version 4.12.1. In the example provided on the mui.com website, they utilize the sx prop and pass an object with different di ...

javascriptreactjsmaterial-ui

Square Division, width set to match 100% of the height

I have been attempting to create a square shape that is responsive, with the width determined by the height of the element (100%). I personally think achieving this using CSS alone is not possible. The goal is for the square's width to match its heig ...

javascriptcssresponsive-design

How to prevent the scroll bar from affecting a fixed div located at the top of the page

Check out this website: I am struggling with setting up a fixed menu div at the top and a content div below it on my site. I want the scroll bar to only apply to the content div and not the header div at the top, but I can't seem to figure out how to ...

htmlcssscrollbaroverflow

Dropdown with multiple selections organized in a hierarchical structure

I am in need of the following : Implement a drop-down menu that reflects hierarchical parent-child relationships. Include a checkbox for each node to allow for selection. If all child nodes are selected, their parent node should be automatically ch ...

javascriptjquerycssdrop-down-menu

Styling elements with Css Flex in a single row

Hi there, I'm currently working on a project and I'm facing an issue with aligning all the items in the same row. I've attempted to use flexbox but the items end up overlapping each other and I'm unsure of how to resolve this issue. To ...

cssreactjsmaterial-uiflexbox

The sidebar vanishes when you move your cursor over the text contained within

My issue is that the side menu keeps closing when I hover over the text inside it. The "About" text functions correctly, but the other three don't seem to work as intended. Despite trying various solutions, I am unable to identify the root cause of th ...

javascripthtmlcss

Can I Select a Specific Node in React Component with Unique Behavior Upon Reuse?

Seeking advice on how to uniquely target a specific node within my react reusable component in order to perform operations on it multiple times independently. I will be rendering this reusable component several times on the same page in my App.js. Here is ...

javascriptreactjs

How can I use CSS to make the row and column headers of a table freeze while scrolling within an overflow

I am currently working on implementing frozen row and column headers in a table within a content wrapper, similar to what you see in Excel. However, I have been facing challenges with using CSS tricks that involve the position:absolute property, especially ...

htmlcss

Adjust the transparency and add animation effects using React JS

When working on a React project, I encountered an issue where a square would appear under a paragraph when hovered over and disappear when no longer hovered. However, the transition was too abrupt for my liking, so I decided to implement a smoother change ...

javascriptcssreactjstypescriptmouseevent

Tips for utilizing the getServerSideProps function

I want to improve the SEO friendliness of my page by utilizing the getServerSideProps method. Despite searching online, I couldn't find a specific example that fits my situation. I am uncertain about how to proceed since I currently have a useEffect m ...

javascriptreactjsnext.js

Attempting to transform a numerical value into CSS syntax

Currently, I am attempting to loop through several DIV elements, extract a numerical value from each DIV, and then based on that value matching a specific value in the JavaScript code, assign a particular CSS Class back to the original DIV. This is the sn ...

javascriptcss

How can I make this NextJS component show its width as soon as the page loads?

When I try to run this code to retrieve the browser's screen width, I encounter the following error: ReferenceError: window is not defined The commented-out code works fine with a default value of 0 and updates correctly when the browser width chan ...

javascriptreactjsnext.js

What is the best way to add a CSS link if a request is not made using AJAX?

My webpage, 'foo.html', retrieves data from a database using AJAX ('ajax.html?options=option1') to populate a table. The table is styled nicely with CSS that is linked to 'foo.html'. However, I also want the ajax.html page to ...

htmlcssajax

Utilizing a CSS/HTML div grid to mirror a 2D array in JavaScript

Currently, I am working on a personal project that involves creating a grid of divs in HTML corresponding to a 2D array in JavaScript. However, I am uncertain about the most effective way to accomplish this task. Specifically, what I aim to achieve is tha ...

javascriptjqueryhtmlcss

What is the best way to center a div vertically on the page?

I've utilized Bootstrap 3 to create this row: <div class="cart"> <div class="row border"> <div class="col-md-8 desc pad itemsheight"> <div class="col-md-12"> <!-- react-text: 141 -->Docos <!-- /react ...

htmlcsstwitter-bootstrap-3