Changing colors in react-bootstrap may be a challenge, but I'm looking to customize the color of my button beyond the primary options. Any suggestions on how I can achieve this using JS and SCSS?
Changing colors in react-bootstrap may be a challenge, but I'm looking to customize the color of my button beyond the primary options. Any suggestions on how I can achieve this using JS and SCSS?
const App = () => (
<div className="content">
<ReactBootstrap.Button bsStyle="primary">Default Button</ReactBootstrap.Button>
<ReactBootstrap.Button bsClass="custom-btn">Custom Button</ReactBootstrap.Button>
</div>
);
ReactDOM.render(
<App />,
document.getElementById("react")
);.content {
padding: 10px;
}
.custom-btn {
background: #fff;
color: red;
border: 2px solid red;
border-radius: 3px;
padding: 5px 10px;
text-transform: uppercase;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<div id="react"></div>The official documentation from here provides instructions on how to style the react-bootstrap <Button /> component by using the bsClass property.
Give this a shot:
If you're looking to style buttons specifically, try adding the variant='custom' attribute in the Button component and then customize your button in the CSS file like so:
.btn-custom {
...
}
When in a bind, I resorted to using inline styles for basic button styling within ReactStrap.
import React from 'react';
import { Button } from 'reactstrap';
const PaginationButtons = (props) => {
return (
<div>
{!props.data.previous ? null : <Button style={{color:"#00005c", margin: "5%", boxShadow: "5px 5px 3px rgba(46, 46, 46, 0.62)"}} outline onClick={props.handlePrevious}>Previous</Button>}
{!props.data.next ? null : <Button style={{ color:"#00005c", margin: "5%", boxShadow: "5px 5px 3px rgba(46, 46, 46, 0.62)"}} outline onClick={props.handleNext}>Next</Button>}
</div>
);
}
export default PaginationButtons;
To apply custom styling, simply include the CSS in your stylesheet or if you prefer, use pcss
Here is an example of the CSS code:
.btn-primary {
color: #fff;
background-color: #2E4C80;
background-color: cutom-color;
border-color: #2E4C80;
border-color: cutom-cor;
}
By adding this CSS, it will automatically take precedence over default styles
Replace using !important:
Custom.css
.btn-custom {
background-color: #370344 !important;
}
element
<CustomButton className="btn-custom">Save</CustomButton>
For a comprehensive guide on "Theming and Customizing styles," check out the tutorial provided by react-bootstrap.
Depending on the version of react-bootstrap you're using, you can access the appropriate link from the options below:
.
If the above links ever change, I recommend visiting the "Theming" page on the react-bootstrap website for up-to-date information on this topic.
Experience the magic of playing with React conditional properties.
<button
className={
selectedOffer?._id == offer._id
? "btn btn-danger rounded-0 mx-1"
: "btn btn-outline-danger rounded-0 mx-1 bg-white"
}
style={
selectedOffer?._id == offer._id
? { backgroundColor: "#FA0105" }
: { borderColor: "#FA0105" }
}
onClick={() => setSelectedOffer(offer)}
>
{offer.slug}
</button>
After some trial and error, I've finally cracked the code on this one. If you're using SCSS, here's a handy solution for tweaking both the button itself and the text it holds (which I assume will be a link). It's crucial to remember to use the '!important' rule on every line of style, as pointed out by others above. While most examples online refer to the custom button class as 'custom-btn', feel free to name it whatever suits your project best.
In the example below, we create a Bootstrap button with a personalized yellow background, unique margin and border settings, and a white font color for the link inside the button.
<Button className="any-class-name-you-want">
<a href="your-link">your-text</a>
</Button
.any-class-name-you-want {
background-color: #fcb426 !important;
margin: 10px 50px !important;
border: 1px solid #fff !important;
a {
color: white !important;
}
}
If you're looking to customize the color of a clicked button in react-bootstrap, you'll need to override the default scss styles for buttons. For instance, if you want to change the color of all primary buttons when they are active or clicked, your code might resemble this:
index.css
.btn-primary:active {
--bs-btn-active-bg:#ff79c6;
--bs-btn-active-border-color: #ff79c6;
--bs-btn-active-color: #44475a;
}
I am looking to add 2 JQ UI Sliders to a single page on my PHP website. I need to capture the final values from both sliders (the last value when the user stops sliding) and store them in PHP variables for multiplication. How can I accomplish this task? I ...
Despite the claims on the official website that gltf files should load in three.js scenes using IE11, I have been experiencing issues with the loader. Even the examples provided by three.js fail to work on Internet Explorer when it comes to loading gltf fi ...
My schema is structured like this: module.exports = mongoose.model('Buyer',{ username: String, password: String, email: String, url: String, id: String, firstName: String, lastName: String, credit: Number, }); Wh ...
When using the Bootstrap 3 dropdown-menu within a dynamically generated container, I am encountering an issue where the dropdown-menu appears behind the newly created elements. Please refer to the image for visual clarification. The container item has pos ...
If I were to create 2 different sets of tables like this: <table id="Table1"> <tr> <td></td><td></td><td></td> </tr> </table> <table id="Table2"> <tr> < ...
I have the following JavaScript function that creates a button element with a click event attached to it. function Button(id, url, blockMsg){ var id = id; var url = url; var blockMsg = blockMsg; var message; this.getId = function(){ return id; }; th ...
Is there a way to prevent all links from being activated until an ajax call is complete? I am looking for a solution that works for both click events and keyup triggers. In essence, what I am after is: - The Ajax link is activated (either through a clic ...
Here is the code snippet that I am having trouble with: <DetailsBox title={t('catalogPage.componentDetails.specs.used')}> {component?.projects.map(project => { projectList?.map(name => { if (project.id === name.id) { ...
Hey, I'm working with a template code that looks like this: Here's my script code: data () { return { loadPage: true } }, mounted () { this.loadPage = true }, And here is my styling code: #app{ width: 100%; opacit ...
When I try to serve my react application with an Express server, I run into a problem. I have set up the react application to make API requests via a proxy, but now that I am serving the build using Node.js, all API routes are returning a 404 error. &quo ...
/html code/ There are 4 textboxes on this page for entering minimum and maximum budget and area values. The condition set is that the maximum value should be greater than the minimum value for both budget and area. This condition is checked when the form i ...
There seems to be a lot of repetition in the code that needs to be cleaned up. I'm wondering if the switch statement is necessary. It looks like it requires the muiTheme palette to be passed this way. Also, can these theme constants be placed in a sep ...
Currently, I am working with AngularJS. When a button is clicked, I am setting a cookie and it works perfectly fine. However, when the page is refreshed and another button click occurs, a new value is stored in the array while the old cookie value becomes ...
In my AngularJS route configuration, I have set up the following paths: moduleA.config(function($routeProvider){ $routeProvider. when('/A',{templateUrl:'A.jsp'}). when('/B',{templateUrl:'B.jsp'}). wh ...
I inserted this code snippet within my <li> tag (line 5) but it displayed as blank. | filter: {tabs.tabId: currentTab} To view a demo of my app, visit http://jsfiddle.net/8Ub6n/8/ This is the HTML code: <ul ng-repeat="friend in user"> ...
When attempting to execute react-native start, an error occurred which has not been encountered before. The error message is as follows: ERROR ENCOUNTERED Loading dependency graph...events.js:287 throw er; // Unhandled 'error' event ...
I'm completely new to promises and I'm learning how to save multiple items to a MongoDB database system. When dealing with a single item, I have a function that utilizes promises. It returns a promise that either rejects if the database save ope ...
Is there a way to replace specific occurrences of a string within a web page's body without disrupting other elements such as event listeners? If so, what is the best method to achieve this? For example: Consider the following code snippet: <body ...
My Owl-carousel slides are disappearing after resizing the browser window. You can see the issue in action here: . The website where this problem occurs is: . I suspect it has to do with the CSS animation within the items, as disabling the fade animation r ...
While working on some React components, I created a styles.js file for each of them. I am following a YouTube tutorial that uses material-ui version 4, so I decided to upgrade to V5. Code snippet for the component (Form): import React from 'react&apo ...