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';
Related
I'm working with Material-UI on my NextJS project, and wanted to know if is there a way to replicate the paper background-image on other components ? It will allow me to make some other components the exact same colors as Paper, because this background-image affect the color with a lighter effect.
EDIT: this effect seems to only occurs on dark mode
Thanks
Some components like Card, Dialog, Menu (and more) already use Paper as an inner component, then they get its style. The best way to add it to your components is to just use Paper as a surface.
You can also add variants to Mui components - for example, you add paper variant to TextField, and there add the styles.
A simpler way (but not complete) is to directly add the Mui-Paper className to another component (it is not complete because there are other styles except Mui-Paper. To achieve the elevation background-image effect you mantioned, you should add .MuiPaper-elevation{props.elevation} className.
[i couldn't find any thing to have icon an text together in placeholder and label of items]
(https://i.stack.imgur.com/TzOxe.jpg)
I think this one is more accurate for your design.
https://github.com/instea/react-native-popup-menu
This picker can render icon as your need just render your icon inside the render options
https://www.npmjs.com/package/react-native-custom-picker
I used react native popup menu as my friend said and it worked after I used this code:
<MenuOptions customStyles={{optionsContainer:{marginVertical:-60}}} >
I have two Material UI AppBars in my application. The first appbar is part of the layout of the page and appears first. However whenever the second one appears, it adds an additional style tag to the page which messes up the first AppBar and hence the page. The second AppBar is:
<AppBar position="static" color="default>
and the CSS it adds is like this:
<style data-jss data-meta="MuiAppBar>...</style>
Now there is already a style element in the header with the same CSS rules which get overridden by this.
I have tried using withStyle and className and putting the position prop as CSS to isolate the CSS rules for the second AppBar, however to no avail as the issue is with the props. What is the standard way of handling this? thanks.
Edit 1:
Upon revisiting the two components which are making use of AppBar I realized something. One was imported like this:
import AppBar from '#material-ui/core/AppBar/index'
and the other:
import AppBar from '#material-ui/core/AppBar'
When I removed the '/index' from the first, then it got fixed.
Can someone explain what is going on here? thanks.
import AppBar from '#material-ui/core/AppBar' is the correct way to import the component.
From https://material-ui.com/guides/minimizing-bundle-size/#option-1
Be aware that we only support first and second level imports. Anything deeper is considered private and can cause issues, such as module duplication in your bundle.
Adding /index turns it into a third-level import and results in module duplication and thus duplication of the styles.
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.
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle