Should I consider using an UI framework when initiating a React project?

I'm embarking on a new website project and I'm contemplating whether using a React UI Framework is the way to go, or if I should create my own components and grid system from scratch. I've been drawn to projects like ElementalUI's take on Bootstrap3, MaterialUI forms components, and Grommet, but they don't always integrate seamlessly due to differences in tools like SASS and LESS.

In past projects, I've experimented with various UI frameworks, only to find that when I needed to customize something outside of the framework's scope, it was often easier and more aesthetically pleasing to build it myself rather than trying to work around limitations.

Now, I'm leaning towards developing my own React components utilizing a combination of SASS and CSS3 for maximum flexibility and control.

Thank you!

cssuser-interfacereactjsmaterial-ui

Answer №1

This question is both excellent and challenging to address.

Throughout my experience working on various React projects with different teams, we typically crafted our component sets with custom styles. Whenever we required a specific feature, such as a customized date picker, we turned to npm for solutions.

Answer №2

In the interest of transparency, I played a significant role in developing ElementalUI.

I suggest taking the time to explore different UI frameworks and determining if they offer the components and features necessary for your specific project. It's also beneficial to delve into the individual components themselves to understand how and why the creators tackled certain challenges - this insight can be incredibly valuable.

Elemental, along with many other frameworks, excel in providing consistency across applications where uniformity is key. However, from my own experience, building custom components may yield better results for websites.

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

I'm experiencing some unusual behavior with the Windows media app when using HTML and CSS

I have a Windows Media Player box on my page, but it overlaps every piece of HTML code. How can I get it to move to the back so that I can still use it? Another problem is that everyone who visits my page needs a plugin to load it, even though most people ...

htmlcsswindowswindows-media-player

Issue with applying fontFamily in React / Next.js 9

Issue Description I'm facing an issue with my Next.js application where I am unable to change the font family of a <p> element using in-line styles. Oddly, when I attempt to apply a color: 'red' style, it works without any problems. ...

reactjsjsxnext.js

Strange yellow background color is showing up on OSX Safari

Whenever I hover over a language link with the language submenu open, an unexpected yellow background-color appears. This issue seems to be caused by the CSS rotation used for animating the menu opening. The problem is only noticeable on non-retina screen ...

htmlcssanimation

Absolute positioned TD creates a gap upon being displayed

Hey there, I am facing an issue with a table I have. In each row (TR), the last TD element has a class called 'abs'. The style for this class is specified in the provided code snippet. Initially, this element is hidden. However, when you hover o ...

jqueryhtmlcss

Incorporating a background image into a Material UI theme with CSS styling

When customizing a theme in material UI, one can adjust or override it using the function createMuiTheme. Below is the complete file where this process is carried out: import { createMuiTheme } from '@material-ui/core/styles'; import purple from ...

cssreactjsmaterial-uibackground-imagetypeerror

Creating a task management system using HTML, CSS, and JavaScript that utilizes local

I have been extensively researching how to create a to-do list using JavaScript with local storage, but unfortunately, I have not been able to find exactly what I am looking for. Is there a way for me to set up a to-do list and input data before actually ...

javascripthtmlcsslocal-storage

Tips for implementing a controlled RadioGroup in React: Mapping through an array of values to dynamically populate radio buttons

I have a scenario where I am utilizing a pre-defined set of arrays to populate multiple RadioGroups. The component hierarchy in the codesandbox is structured to resemble that of my actual project. Whenever I select a radio button, I receive an error messa ...

javascriptreactjsmaterial-ui

I'm encountering an issue where I receive the error `Cannot read property 'map' of undefined` while attempting to integrate the backend with React. What could be causing this error and how

I'm currently learning React and I've been using a tutorial here to connect my database to the front end of my React application. Unfortunately, every time I try running 'npm start' at 'localhost:3000' in express-react/backend ...

javascriptnode.jsreactjs

What are some ways I can customize the appearance of a Bootstrap 5 Navbar specifically when it is in the collapsed

Currently utilizing Bootstrap 5, my goal is to align the Navbar social icons to the left when the navbar is collapsed for small/mobile devices, and to the right when viewed on a larger screen. Can you assist in identifying which selectors need styling for ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

Issue encountered: "An error has occurred stating that your cache folder contains files owned by root. This is likely a result of a bug present in older versions of npm. This issue arose during the execution of the

While attempting to create a new react app using the command npx create-react-app example_app, I encountered the following issue: [ Your cache folder contains root-owned files, due to a bug in previous versions of npm which has since been addressed sudo ...

javascriptnode.jsreactjsnpmcreate-react-app

I am attempting to create an API request that is dependent on the outcome of another API request by utilizing a forEach loop. Is there a different approach I could take to achieve the desired

After successfully implementing an API request based on the result of another API request, I am looking for a more efficient method than using forEach for my subsequent API call. Is there a way to achieve this by utilizing Promise.all or any other alternat ...

javascriptreactjsapireact-hooks

Configuration options for Path Aliases in TypeScript

In my Next.js project, I am utilizing TypeScript and have organized my files as follows: |-- tsconfig.json |-- components/ |---- Footer/ |------ Footer.tsx |------ Footer.module.sass My path aliases are defined as:     "paths": {       ...

reactjstypescriptnext.js

Modify the standard placement of choices in MUI

Currently, my UI is powered by MUI. I have various options displayed in the image below: Everything looks good so far. However, I wish to reposition the options container further down. (It is currently set at top: 64px which is the default). I aim ...

cssmaterial-uimakestyles

Having trouble loading external CSS in HTML?

I have been attempting to load an external CSS file into my current HTML file without success. I have provided images showcasing the code: View the code here See the output here Currently, I am working on Windows and using Aptana Studio 3 as my IDE. ...

htmlcss

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

javascripthtmlcssvue.jsobject

Issue with the collapse animation in ReactJS Material UI after implementing a new component

Hello fellow developers! Check out this code example for a smooth collapse using Material UI: Code Example I noticed that when I move JSX to an external component, the smooth effect breaks. I've provided examples with and without smooth collapse for ...

reactjsuser-interfacematerial-ui

Adding all the values together in an array

I am attempting to extract the values from the array based on their type, and then calculate the total by summing them using the function total(item). However, instead of getting a sum, the result is a concatenation of values. const App = (props) => { ...

reactjs

Ensure the options list remains unchanged in a Semantic UI dropdown with multiple search select functionality

Currently, the multiple search select dropdown enables users to find and select an item from the options list, which then becomes unavailable for further selection. I am interested in changing this behavior to allow selected options to remain available. I ...

reactjsselectsearchdropdownsemantic-ui

change the css back to its original state when a key is pressed

Is there a way to retrieve the original CSS of an element that changes on hover without rewriting it all? Below is my code: $(document).keydown(function(e) { if (e.keyCode == 27) { $(NBSmegamenu).css('display', 'none');} ...

javascriptjquerycssonkeydown

Tips for effectively wrapping Material UI v5 component to ensure the Grow component functions correctly

Being a newcomer to React, I want to apologize in advance for any silly mistakes or inaccuracies that may be present. I have successfully implemented the code for my Blog page: export default function Blog() { const [photos, setPhotos] = useState([]); ...

javascriptreactjsmaterial-uijsx