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
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 see in the antd docs, there is option to use ConfigProvider, where I can customize some styles or some behaviors.
In my case I want to customize outline style of elements(when I focus on input, it gives blue outline ring, so I just wanna make it green).
I wrapped my whole App inside ConfigProvider. But I can't find any example of code of actual customizing.
Any help will be appreciated :)
Is there any way to target some components from react-bootstrap in CSS. For my application, I'm using Modals from react-bootstrap and I need to change some style on all of them and it will be annoying if I need to change every single one individually.
Yes, it is possible, however you will need to inspect the Modal using ChromeDevTools or the like and see what classes are applied to the Modal when it is displayed. For example, when I inspected the Modal from react-bootstrap, I noticed the styles applied to the heading were given the className of "modal-header". So I created a Modal.css file and added the following code to it:
.modal-header {
background-color: red;
}
Then, I imported "./Modal.css" into the Modal.js file or wherever you've defined or using your Modal. Finally, when I opened the Modal, the heading had a background of red color so to speak.
Please note that it can be a little difficult to override bootstrap styles sometimes.
I don't know how to remove tooltip from a pagination element. I'm using antd's table. This table contains a pagination. It's a part of the table. I'm trying to customize it using styled-components library. I've tried to find all classes which is containing tooltip in their titles and set them:
display: none !important;
But there was no result. There should be some class that is used for this purpose which I have no idea.
I will be grateful if someone knows the solution for this issue.
The tooltip comes from the title attribute of <li/> elements.
Such behavior is by design, therefore you can't remove it.
Alternative solutions which aren't recommended:
Implement Pagination by yourself, style it using the antd-css classes and integrate it with your custom Table.
Dynamically remove all title attributes by querying the dom.
Add showTitle=false in pagination, just put this...
pagination={{...pagination, <b>showTitle: false</b>}}
OR
pagination={<b>showTitle: false</b>}
It will disable tooltip in pagination.
My code Image:
And site API image:
The documentation for the react-bootstrap overlay trigger says that the overlay prop can be an element or text. However, whenever I pass it something other than a "Tooltip" component it doesn't work. In fact, if you modify their code example on the website linked below to be just a div instead of a Tooltip or a string, it doesn't work on their site either. Does it have to be passed a Tooltip?
https://react-bootstrap.github.io/components.html#tooltips-overlay-trigger
Easiest thing to pass is a Tooltip or a Popover.
You could also pass it something else, but then you have to wrap it in an Overlay instead of an OverlayTrigger. See the react-bootstrap docs on Custom Overlays for more specific examples.