I'm trying to find the way to hash classname of all the components that use mui in my project and can't seem to find the right way. I want output like facebook or google all classes are hashed. If the product uses css-module, it is possible to add a plugin in the webpack for hashing, but here I am using regular css and mui component. Does anyone have relevant documentation or specific instructions? As if using jss to do for example? Thanks.
I tried using the classNameGenerator provided by mui but it only changed part of the class to some numbered characters after it. what i want is all classnames with no rules.
Related
I am trying to get this layout using tailwind css and also render elements in this order with vue or react
This layout is called "masonry". I recommend that you check how to do that one in CSS (or with some vanilla JS/package), it's not specific to React nor Vue per-se.
As of how to implement it exactly, SO is not a coding platform so I recommend that you Google that for further progress.
There is a full feature set with Styled Components when developing in React. It seems you don't get the full experience in react-native.
These limitation aren't really specified anywhere. What are the exact limitations?
I know selectors is one of them.
Dug around on this for a while and found a good response in a GitHub issue. #Andus in the comments is correct. Styled Components simply works within the bounds of React Native flavored CSS.
There are no pseudo elements in React Native 😅 Similarly you won't be able to use:
Any unsupported positioning
Some transforms don't have transformations afaik
Child / Children / Sibling selectors
Media queries or other at rules
Sorry about that! React Native is very focused on their style system, in the sense that they don't support full CSS but only CSS-like StyleSheets, so all that is done on RN in styled-components is some thin conversions to StyleSheets.
Please,
I want to know how to create a dump carousel in material-ui (for 3 images) since it's not predefined in material-ui ? I tried to use material-auto-rotating-carousel but it seems not easy to integrate in a simple React page.
You are correct, this feature doesn't exist in material-ui,
I will suggest to use some util for carousel
or you can use a util which provide a scrollable effect. Please check this answer - https://pt.stackoverflow.com/questions/372089/carousel-no-material-ui
I need a frontend UI for my react web application and I was looking to Material UI and Reactstrap. Which one do you think is better and easier for begginers to understand? Also are there any tutorials for either them because I found both of their documentations confusing.
I am confused about how to incorporate the components and than customize them as well
About customizing them, there is a section explaining about it and they provide examples as well.
You only need to import the component you want and plug it to your React apps just like regular React component.
As for API part on Material UI, most of them consist of 3 parts (Props, CSS API, Demos) for each component. The props section provide you with all the available props for the corresponding component. For example the Button props API, it list all the available props you can provide for the Button component
CSS API section is the section you would want to look for when you want to customize the component, it list all the available keys for you to override, in my opinion it's best to look at the corresponding component implementation before customizing it because I find it a bit tricky. The source are available for public on their Github repo
Noob Question: Is the intention of the cSS API to make it possible to use the components as normal HTML without the need for any additional React code? Does the usage of only the CSS API therefore require the inclusion of the React JS package or can the Blueprint JS package alone work ?
As an author of Blueprint, I can confirm that it is in fact possible to use some of the Blueprint components via CSS only. Components that describe a CSS API in the documentation can be used without React, but usually with caveats (the biggest being that you must write the markup correctly). The CSS API is presented as an alternative to the JavaScript (React) API, and CSS modifiers are supported by the JS APIs through the className prop.
As Blueprint is a React-based UI toolkit, the best experience will be had by using React, primarily because you no longer have to write the markup correctly.
It is not possible to use the components as normal HTML, without ReactJS. Blueprint is a ReactJS UI toolkit for the web.
Their pre-made (React) components are customizable via a JavaScript API or a CSS API (or both).
The idea behind the CSS API, that some of the components have, is to provide additional options for style customization.
Let's use an example. See the Menu component. Its CSS API allows us to modify Menu's style. One example is that we can add icons to menu items, read in their docs:
Add icons to menu items the same way you would to buttons: simply add the appropriate pt-icon-<name> class*.
PS: I'd recommend you to head over the ReactJS docs, understand how ReactJS components work, get deeper knowledge about the core ReactJS concepts (or complete a fundamentals course) and only then - try to implement BlueprintJS.