any suggestion for a native reactjs component that supports
treegrid grouping such as https://datatables.net//forums/discussion/37920 ?
Hopefully, I can help you. Correct me if I am not fully understand your question. I use react-bootstrap-table. which is easy to use, but you need to take care of the CSS global element. I got some bugs before, I recommend use the CSS module to solve these CSS conflict.
Related
Some background
Our team has been using Material-UI (MUI) for quite some time, and we love it. With the release of MUI v5, we took the time to check which styling solution we would use next, since JSS is being abandoned by the MUI team.
We ended up following a discussion from the folks at Shopify. They made a very detailed comparison of styling solutions, and ended up with vanilla-extract as their tool of choice. Strong TypeScript support and, foremost, the zero-runtime-approach, got us convinced.
Sadly, vanilla-extract had not been considered by the MUI core team in their decision making.
Question at hand
MUI, according to their docs, enables the user to use various styling solutions. The styling engine used under the hood can be configured, as roughly described here.
Questions:
is it (conceptually) possible and (pragmatically) reasonable to use vanilla-extract for:
styling MUI components?
using it as the style engine underlying MUI?
where would sprinkles come into play?
what would be the concrete steps for implementing this approach?
has somebody done this already, and would be willing to share their code? 😇
Contrary to common practice, I haven't really tried anything yet, implementation-wise. From my understanding, this would mean creating something along the lines of mui-styled-engine (wraps emotion) and mui-styled-engine-sc (wraps styled-components). Since that seemed pretty involved to me, I thought I'd ask first.
The detailed comparison you provided doesn't includes jss.
But you can use jss directly without a setup from MUI.
Use react-jss. I don't know about zero runtime thing but they also support typescript and will be easy for you to migrate your existing stylesheets written on MUI4. You just need to change the function names such as makeStyle to createUseStyles.
Here is the whole doc - https://cssinjs.org/react-jss/?v=v10.9.0
I personally like jss because it helps to keep styles intact from the actual components. I have use it over MUI 5 provided styled engines and really much happy with the results.
I'm using the MGT with React. I am trying to style the component in the same fashion as the rest of my application (reactstrap).
I've found the custom CSS properties you can set, which has got me 90% of the way there, but I need to be able to adjust the margins of the control (margin-left: -3px) and I can't seem to do this no matter what I try.
I think the answer to my problem lies in using the templating functionality but the documentation is a bit lacking for this.
Any ideas where I should start with this? Am I on the right track? Does anyone know of an example of using templates with the PersonPicker component?
Without specifics, there definitely might some css properties that we haven't exposed yet. I don't think there would be any recommended code to use here, instead I'd highly suggest opening a an issue on our github repo as a feature request. We can then work with you on improving the toolkit with these properties.
I know the question is duplicate but here are my explanation about the question :
if i have a simple .css file for a specific template and i want to load that file when that component load, is this possible? not like the variable or object way like the answer are given.
my opinion are if the template css are really big then this is very tedious task. Like in angular we can add .css files for specific component and that load with prefix and allow that css to that component.
please suggest if any.
I will close this once, i will get the appropriate suggestions.
I found this concept answer that i am looking for there are multiple way to do this:(You can google these for more details description).
Can Use Radium CSS concept for that.
BEM CSS design concept.
CSS Module (create react App CSS module).
Please let know what more we can do.
Thanks,
I jumped into React recently, so I'm very confused about many things. One of them is about how most of people design UI in React.
Before jumping in, I used Bootstrap to design UI of my website by using pre-made components such as buttons, modal views, navigations, and so on. But, figured out I can't use it anymore in React, but I can use React-Bootstrap instead. Is React-Bootstrap still the most popular UI framework in React as well? I'm asking that because I found some other UI frameworks such as Semantic UI or Material UI for React.
Also, I found styled-components. However, styled-components makes me feel like I need to make every component by myself to use which sounds like taking too long time.
As a very beginner, I'm curious about how people usually work on UI in React?
Firstly, There is no clear answer for the problem. In general purpose of styled-components not mean don't use another ui framework. And the companies solve the problems which is spesific with their Engineering Team. They have their own architecture though. But the alone programmers are choose some open source solutions.
Well, Some people use together or alone. It's totally about your project or your style of architecture. But still i would say some stuffs for giving point of view.
In the other hand; the UI Frameworks are solve modular problems. An example: You cannot create a modal with only css even styled-components. you know, you need JavaScript for that.
To use both:
You can use on Elements Semantic-UI(ReactJS or direct element with the className),
You can use styled-components instead of css file for spesific part of your project. As e.g: Main, Aside, Article, Post, TopNavigation etc.
If you prefer to use the styled-components, also you can use same components in React Native. (There is no css file support for React Native. You'll need inline CSS)
To use only div instead of the spesific component, you'll confused after project being bigger. I would recommended you to create for each meaningful Element.
You can combine the open source community UI parts with your own CSS.
You won't need a CSS(Less, Sass) file when you use styled-components. That's mean, you'll work only on your JS files instead CSS files, so you can do dynamic things in your components. styled-components supports almost all CSS features.
To use standalone Semantic-UI:
I prefer Semantic-UI-React instead of ReactJS bootstrap frameworks.
You cannot use the CSS of Semantic-UI-React in React Native. You should choose which is another solution or actually make your own your components architecture.
You are ready to go with every project with Semantic-UI-React for web/mobile site.
You have to learn basics of less-lang.
You can change everything from your theme files which variables.
Lastly,
If you have big project or goal though; nevertheless, i think you should use a UI Framework in learning and adaptive process.
If you are still not sure what you should do you then, you have to try all of them to find your own architecture.
I think in learning process, you have to concern about ReactJS needs(Redux, Router etc.) before CSS.
It's my first answer at Stackoverflow. Hopefully, the answer will help you for your concern.
I really want to minimize the work of ever changing look n feel changes in my website/portal. The changes are sometimes related to only CSS which sometimes wants me to update the name of the classes and most of the times, only internal styles are updated (only in this case changes are transparent). But the real torture comes in when I come to know that there are changes in HTML structure of new style guide and after whole application/widgets need to be updated and aligned according to the new style guide.
Technologies used in the application are: AngularJS, Bootstrap 3
Now, please suggest what would be the best possible way to minimize these style guide changes? Can AngularJS helps me in that?
Thanks,
Jaffy
Is not very clear which are your requirements or why your style guide changes. But is not something should try to fix using Angular or Javascript directly. The classes name shouldn't change pretty much never.. except when your layout changes, otherwise the only change should be on the styles.
What you need is 2 things:
If you use Foundation or Bootstrap, you should use the SASS/LESS
files of them and override the styles , that way if the ui
requirements changes for instance: background-color, or
border-radius for certain components, you only need to go to the
proper .scss or .less file and change the variable value
You can Import the sass version using
bower install bootstrap-sass-official --save
Then configure your grunt/gulp or any other task-builder to build sass for instance, and you can override the bootstrap variables.
A convention for naming your components, and knowledge of OOCSS (Object Oriented CSS) i recommend you to use BEM, is very easy to read once you understand the convention and helps a lot with possible css specificity issues.
I hope this helps, otherwise please update your answer more, to understand where are you standing.