I need to customize react-toastify.
I tried to follow the advice from the documentation and change the styles in the .scss file. unfortunately this didn't work. tell me what am I doing wrong?
I want notifications to look like on the picture how I want it to look
You can use this method in App.js :
<ToastContainer
position="bottom-right"
autoClose={8000}
pauseOnHover={true}
draggable={true}
theme="dark"
/>
here the toast appears on the bottom-right side, it is automatically closed after 8 seconds and its background theme is dark.
Add a style attribute like this:
<ToastContainer
position="bottom-right"
autoClose={8000}
pauseOnHover={true}
draggable={true}
theme="dark"
style={{width: "100px"}}
/>
Related
I need to do two things:
Need to increase default icon arrow size
Need to change icon to a different one when the panel is expanded.
I managed to do that this way:
<Collapse
expandIconPosition='right'
className='collapse-container'
// this works fine
expandIcon={({isActive}) => isActive
? <img src={closeCollapseIcon} />
: <img src={openCollapseIcon} />}
>
<Panel header='Question...' key='3'>
<p className='help-panel-text'>Some text</p>
</Panel>
</Collapse>
My question is:
Is there a way to do the same but in a more elegant way? My solution seems to be too straightforward.
You dont need to render two img tags, you can achieve the same thing with one tag. A more appropriate way would be using the Icon component provided by ant design
expandIcon={({ isActive }) => (
<Icon
component={isActive ? closeCollapseIcon : openCollapseIcon}
width="2em"
height="2em"
/>
)}
MUI's docs say that it's possible for a Box wrapper to override its child's styling with the clone option, like this:
<Box color="red" clone>
<Button>Click me</Button>
</Box>
As far as I understand, it's supposed to cloneElement its child and inject the styles. However, it doesn't seem to work at all - not with buttons, nor typographies, nor any other component.
Hmm yes clone has some issues seems it will be removed in v5
https://github.com/mui-org/material-ui/issues/18496#issuecomment-557835104
for the moment could use like but not good :(
<Box color="red">
<Button color='inherit'>Click me</Button>
</Box>
I am using react-bootstrap Cards on my project. I have great view with that. I have horizontal search button on it. I would like to use this button for routing.
I set my settings on my app.js class. Actually, I can change route with <Link> but my search button looks bad with it. I would like to use Search button while keeping visual design.
Sorry for my explanation, It's hard to explain without any visual support. if it is not clear please leave comment and I would try to clarify with onether way.
Here is my codes;
<Card bg="dark" text="white" style={{ width: "18rem" }}>
<Card.Header>SWITCH</Card.Header>
<Card.Body>
<Card.Title>Dark Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up
the bulk of the card's content.
</Card.Text>
</Card.Body>
<Button variant="secondary">SEARCH</Button>
</Card>
I can do routing with wit this code;
<Card bg="dark" text="white" style={{ width: "18rem" }}>
<Card.Header>SWITCH</Card.Header>
<Card.Body>
<Card.Title>Dark Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up
the bulk of the card's content.
</Card.Text>
</Card.Body>
<Link to={"/route which I defined in app.js"}>
<Button variant="secondary">SEARCH</Button></Link>
</Card>
But this time, search button's size decrease. Are there any way to stretch it? Or should I change usage of <Link> ?
You can use a package called react-router-bootstrap from npm and use it. It's very simple and for your use case find the below snippet.
<Link to={"/route which I defined in app.js"}><Button]>Foo</Button></Link>
becomes
import { LinkContainer } from 'react-router-bootstrap'
<LinkContainer to={"/route which I defined in app.js"}>
<Button>Foo</Button>
</LinkContainer>
find more on react-router-bootstrap
You probably will need to do some custom css styling still. You can open up your elements browser by clicking inspect in chrome and find the class of the link, then you can overwrite that class to match your styling needs.
Also try wrapping the link with the button
<Button variant="secondary"><Link>SEARCH</Link></Button>
NOTE: Even though it's not recommended and you should normally avoid it, you might need to use !important in your css when overwriting bootstrap.
you can try,
<Button as={Link} to="/your_destination">Foo</Button>
I'm creatting web app with React Leaflet. How I can transfer marker popup to react-leaflet-sideatabs
Local machine with react (windows 10)
<Sidebar
id="sidebar"
position="right"
collapsed={this.state.collapsed}
closeIcon={<FontAwesomeIcon icon={faAngleRight} />}
selected={this.state.selected}
onOpen={this.onOpen.bind(this)}
onClose={this.onClose.bind(this)}
>
<Tab
id="markerinfo"
header="Information"
icon={<FontAwesomeIcon icon={faInfoCircle} />}
>
// I need to transfer marker information here
</Tab>
</Sidebar>
Not sure if I understand the question. But I think the answer is simply React state. Say you have a marker and only the title is kept in state, you can take it anywhere for that matter.
See this sandbox example.
https://codesandbox.io/s/react-sidebar-marker-wknsp
Note: the example from that sidebar GitHub page was not working with my styling/etc on code sandbox.io so slightly adapted.
I am using Material UI, and I have the following:
import IconButton from 'material-ui/IconButton';
<IconButton iconClassName="muidocs-icon-custom-github" tooltip="bottom-right" tooltipPosition="bottom-right" />
When I am testing the tooltip, the icons are not showing, but the tooltip is showing on hover. Can someone help me create an example? Am I missing the icon URL?
It seems that's an issue with Material-UI docs. Check this Link for more details
If you want to place github icon then you can try using SVG Icon. It seems you have to include google material icons stylesheet in your index.html to make it work.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Generally if we want to use svg icons I do it below way.
import IconButton from 'material-ui/IconButton';
import Remove from 'material-ui/svg-icons/Content/remove';
<IconButton tooltip="Hide" style={{float: 'right'}} iconStyle={{marginTop: -25, color: myTheme.color}} onClick={this.removeMinus}>
<Remove color=“red” />
</IconButton>
Make sure your <IconButton> has a child component that is an icon. In your example it is not rendering anything on the screen (unless you hover) because it has no icon reference.
I think your code is not correct, if you want to use IconButton, you should
has an instance icon inside the IconButton, the code like this:
<IconButton>
<DeleteIcon />
</IconButton>