Blend Material-UI with other frameworks such as Foundation to create a unique design aesthetic

I've been pondering something for quite some time but haven't been able to find an answer. Let's consider the following scenario:

You're working on building a dynamic website with React and you need to choose a front-end framework. In this case, let's say you've decided to go with Material-UI. As your project progresses, you find yourself in need of additional features such as a responsive grid system and show/hide styles. Instead of creating them from scratch or borrowing from another framework like bootstrap or foundation, you start considering including another framework alongside Material-UI.

Here comes the question: I understand that most CSS frameworks come with their own normalization CSS and basic styles for typography and other elements. Is it safe to incorporate a more feature-rich CSS framework alongside Material-UI without risking compatibility issues, or would it be better to avoid this?

Moreover, what is the best practice when it comes to expanding CSS features without duplicating code from other frameworks or constantly reinventing the wheel? Have you ever had to combine multiple front-end frameworks in a project, and if so, how did you address this challenge?

Thank you for your insights.

Best regards, Gregor

Answer №1

Just a heads up, there is a Material Design variation of Foundation available for you to explore over at

When it comes to mixing or using multiple frameworks simultaneously, caution is advised. Possible conflicts and unnecessary bloating can slow down load times.

However, most modern frameworks like Foundation offer the option to be compiled selectively, ensuring that only necessary components are loaded, reducing potential issues.

Answer №2

Lately, I've been considering the importance of choosing a framework that aligns with the features needed for my project. Personally, I tend to stick with Bootstrap (specifically the sass version) for styling purposes, mainly utilizing the css grids aspect.

Combining multiple frameworks can pose challenges in maintenance and may result in unnecessary features being included in your application. While using comprehensive components like Material-UI can be appealing, there may still be instances where a specific feature is lacking in a component.

In my view:

Utilize a framework primarily for styling to maintain a consistent look throughout your site. Alternatively, opt for a responsive grid library which could suffice.
Basic HTML components are often satisfactory for fundamental requirements. For specialized needs, consider creating custom components or integrating from an npm library to ensure only necessary features are present.
By adopting this approach, my site isn't restricted to a single framework. I have the flexibility to easily modify the styling elements, swap components, etc., without having to overhaul the entire application simply because it was built solely on a "feature-rich" framework.

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

The error message "JSX.Element' cannot be assigned to type 'ReactNode' within a React functional HOC" appeared when attempting to pass JSX.Element

I'm in need of creating a Higher Order Component (HOC) that will encase my components within Suspense. The plan is to provide the component and fallback as props to the HOC. This is the structure of my HOC: export const withSuspense = ({ Component, ...

reactjs typescript react-router-dom high-order-component

Tips for creating a corner border using svg illustrations

I've created a div with a dynamic size and border but I'm looking to add corner borders, including one skewed corner, using svg. However, I'm running into an issue where the vertical and horizontal lines are not appearing at the same size. ...

html css svg

When a user clicks on the datepicker, I want to trigger a change in the

I am working on a Flight API and I need to implement functionality where when the user clicks on the return journey field, the button toggles from single trip to round trip (false to true). <DatePicker hintText="Return Date" errorText={this.state.j ...

reactjs toggle material-ui

Changing the z-index property of a Material-UI <Select> dropdown: What you need to know

Currently, I am implementing an <AppBar> with a significantly high z-index value (using withStyles, it is set to theme.zIndex.modal + 2 which results in 1202). The primary purpose behind this decision is to guarantee that my <Drawer> component ...

javascript reactjs material-ui

What is the best way to apply a global theme to React Material UI components?

Looking to customize the style of a specific Material component like ListItemText? Try using the theme variable for a consistent solution across all components in your app. const theme = createMuiTheme({ overrides: { ListItemText: { ...

reactjs material-ui

The dimensions of the div do not match the size of the image

I am struggling to adjust the color of a transparent image within a div using jQuery. I am facing difficulties in keeping the image aligned within the div while changing its color. Can someone provide assistance? My goal is to have the image filled upon a ...

javascript jquery css

Enhance your images with a hover zoom effect while viewing an overlay on top

Is there a way to make an image still zoom in on hover even when it has an overlay using CSS? I am currently working with Bootstrap 5.2 Thank you in advance. .trip-card { position: relative; } .trip-card img { border-radius: 30px; } .overlay { ...

html css bootstrap-5

What is the best way to style multiple classes within the same element (specifically an ordered list ol

Using CSS counters, I have created various styles for an ordered list <ol> by applying different classes and adjusting the styles accordingly. Now, I want the counters to adjust based on screen size, displaying smaller numbers on smaller screens. To ...

css class html-lists targeting

Arranging divs with CSS positioning

I struggle with positioning divs, especially in this particular situation. I am attempting to position boxes in the following layout: _ ___ _ |_|| ||_| _ | | |_||___| Is there a way to avoid manually defining pixel positions for each box and ins ...

css html

How can I limit props.children in a React TypeScript component?

import React from 'react'; import './App.css'; import Message from "./components/Message"; function App() { return ( <div className="App"> <Message> <p>Hello ...

reactjs typescript

The functionality of the React Router DOM seems to be malfunctioning

I am facing an issue with running a program on my computer while it runs successfully on other PCs. When I try to run this program, I encounter the following error message. Any help in fixing this would be greatly appreciated... index.js import React, {C ...

javascript reactjs npm react-router react-router-dom

Creating rows within a table in React.js using the map method: Techniques to follow

Here is my code snippet: const [tasks, setTasks] = useState(''); I am simulating data with a mock server. function fetchTasks() { axios.get('http://localhost:4000/tasks') .then(function (response) { ...

javascript arrays reactjs axios

What triggers the useEffect to execute when utilized alongside useContext?

I have a situation where I call useEffect inside useContext and I am interested in knowing when this particular useEffect is triggered. [settingContext.tsx] // defining the ColorContext object export const ColorContext = createContext<ColorContextType& ...

reactjs next.js use-effect use-context

Tips for properly positioning a bootstrap popover within a grid column

I'm currently utilizing bootstrap 4 alpha 6. Displayed below is a grid consisting of one row and two columns. The first column contains text, while the second column displays a popover: <div class="row text-center align-items-center" style="heigh ...

html css twitter-bootstrap bootstrap-4

Experiencing a problem with generating nested elements using JavaScript

I'm looking to customize the default header of a div using a JavaScript function, but the final result of my code is displaying as [object HTMLDivElement]. Here's the code snippet I'm working with: function CustomizeHeader(){ va ...

javascript html css

Adjust the dimensions of the thead, tbody, and td elements on the fly

I've implemented this property in a .css file on the table shown below and there are 9 records. .fixed tbody td, thead th { width: 5.2%; float: left; } In my scenario, when there are 4 columns, the width should be 23.2%; for 5 columns ...