I'm learning how to use React and Material UI, and I'd like to build the following component:
For the component, I'd like the number below the header to be clickable. I would like to know, would stacking 2 Text Field components, or would using a Table component be better for achieving this?
Related
I am trying to create a Basic Layout with React using Material UI Grid component.
I am following official documentation but the spacing prop seems very confusing and there is very less information available or its unclear in documentation.
When i am trying to nest Grid to create the layout, the negative margins added by the spacing prop confusingly pulling the items and breaking the UI.
Below is the very simple Layout in trying to do
I finally managed to do it with some very complex nestings and custom styles using sx prop as shown below in the codesandbox.
https://codesandbox.io/s/materialgriddilemma-vheq19?file=/src/Layout.js
But I am wondering, for a simple use case as this do I really need to write custom styles?!!
What is the cleanest and recommended way to use Nested Grids in Material UI with Spacing ?
I am trying to copy the parts inside black circles on the image below for training React and Material UI. My problem is that I am struggling a bit with which Material UI components to use... Any help or examples that looks like this are happily accepted!
There are some components from material-ui for composing the UI like what you asked for. You need to compose these components by yourself.
For components inside the long black circle, they can be from selects https://mui.com/components/selects/. You can find different styles from this link.
For components inside another circle. They are buttons, text_fields, chips, and cards. Which can be found from
https://mui.com/components/buttons/ https://mui.com/components/text-fields/ https://mui.com/components/chips/ https://mui.com/components/cards/
Can't give an answer for the part of Minerva Obj Name without knowing how it is interacted.
So I have a component that returns a button with some custom text and an icon. I'm pulling the icons from expo vector icons and so to use the icons I need to write something like:
<Icon_Name name"name"......>
I want to wrap my custom component around an icon or any other component, so then I can use various different icons within that component.
So I want my code to basically be:
<Custom_Component>
<IconOrSomeOtherComponent />
</Custom_Component>
I want to somehow call that icon component within my custom component. Is this possible?
I know that I can pass in variables into a custom component like:
<Custom_Component someVariable="some variable" />
and then use "someVariable" within my the function of the component, but I was hoping to find a solution where I can just wrap a component and call the "wrapped" component inside the function of my "Custom_Component".
I'm using functional components by the way, not class components.
I am using only the loading property of Button component.
Internally the button component requires 0.5mb of icons.
Is there is any way to use only loading icon and not the huge icons import?
Thanks.
I haven't tried for Icon components,
but you can check out babel-plugin-import, which optimizes import statements.
I was able to make it work with CSS & other AntD components.
What I understood from your question is correct, the answer is no. In the meanwhile, you can try another way. download the specific icon as an SVG format form the icon and create your own icon bundle for using icon moon and use it. So you can reduce the size.
Bonus point: Always try to import a specific component like below instead downloading whole antd component.
import Button from 'antd/lib/button';
I've recently gotten into React Leaflet and from what I've gathered from the docs, it is not possible to add a custom React Element (Component or pure functional) as a marker.
What I want to achieve is to be able to use my React Element which is an SVG icon as the marker. This would be useful because I'll need to display several different color icons and it's way more convenient to pass the color as props and let React create the marker.
Am I right in assuming this isn't possible?
You are incorrect! :) React-leaflet allows the creation of custom components. Also, you should check out react-leaflet-div-icon since it seems like it's exactly what you need.