I am trying to customize the bg prop of react-bootstrap/cards, i.e to use something other than the default primary, secondary, danger, etc variants. According to the documentation something like this can be done by providing a custom props with the 'card-' bsprefix, but I can't seem to get it to work.
My current code is something like this:
<Card bg="light-blue">
<Card.Body >
<Card.Text >
foobar
</Card.Text>
</Card.Body>
</Card>
And from a .css file I have defined the following style
.card-light-blue {
background-color: rgb(147, 182, 248);
}
What should be changed so that it works?
Try giving the card a className and using the class to give it a background color. If that alone doesn’t work try adding !important
<Card className=“customCard”></Card>
.customCard: {
background: blue !important;
}
In your example you didn’t give the card a class of light-blue, you tried to assign it a background.
import "file.css"
<Card className="card">
<Card.Body >
<Card.Text >
foobar
</Card.Text>
</Card.Body>
</Card>
css file
.card{
background-color: aqua;
}
Just add a className and modify in the css files;
I think a better way to do this without using !important would be to assign a custom class to the card, and then target both the react-bootstrap card class and your custom class. That should override react-bootstrap styles.
card component:
<Card className="custom-class">
<Card.Body >
<Card.Text >
some text
</Card.Text>
</Card.Body>
</Card>
css file:
.card.custom-class {
background-color: red;
}
Related
I thought I understood how modules worked but apparently not
I have nested scss/sass styles that I'm trying to apply on an element but when I add those multiple styles to my element it doesn't take any of the styles while other elements that only take one class do.
The generated class names are appearing but not the actual styling just to be clear
scss
.cell {
width: 22.5%;
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
.iconColumn {
width: 10%;
}
}
jsx
<div classname={`${styles.cell} ${styles.iconColumn}`}> // this styling doesn't appear
<IconButton
size="small"
onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</div>
<div className={styles.cell}> // this styling appears
<Typography component="div" varient="h3">{row.label}</Typography>
</div>
// ...
how it appears in web browser
<div classname="NonTablePricingTable_cell__3OzOv NonTablePricingTable_iconColumn__2e9YO"> // the one that doesn't add the styling as per the class
<div class="NonTablePricingTable_cell__3OzOv"> // does add styling as per the class
You have a typo in className attribute. It should be in camel case and you have used small case.
Changing classname={`${styles.cell} ${styles.iconColumn}`} to className={`${styles.cell} ${styles.iconColumn}`} should fix the issue.
I have several Fontawesome tags spread across several components. Their color attribute is currently being hard-coded to a custom color HEX code. I want to centralize this color code in css, so that if needed I would just change it one place. Is this possible?
<FontAwesomeIcon icon={faThumbsUp}
size="sm" color="#7ACC35"/>
Yes you could do that, just use className and define your in css file
.CustomColor {
color: red;
}
.CustomColor2 {
color: green;
}
.CustomColor3 {
color: blue;
}
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor" />
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor2" />
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor3" />
Codesandbox demo
I am using Next.js (React) with Bootstrap and styled JSX. I am running into an issue where a custom class in Bootstrap for a modal is only styled with css if the css if global. I declare the custom class using the dialogClassName property on the Modal. This is my function component (I am using Typescript):
const Form: React.FunctionComponent<props> = (props: props) => {
const [FormVisibility, FormDispatch] = useContext(FormContext);
return (
<Modal
show={props.isVisible}
onHide={() => {FormDispatch({ type: ActionTypes.CloseForm }) }}
backdrop="static"
dialogClassName="custom-modal"
>
<Modal.Header closeButton >
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => {FormDispatch({ type: ActionTypes.CloseForm }) }}>
Close
</Button>
</Modal.Footer>
<style jsx global>{`
.custom-modal {
color: blue;
height: 75vh;
width: 75vw;
max-width: none !important;
}
`}
</style>
</Modal>
);
}
This works just fine. But if I were to change <style jsx global> to <style jsx> then the styling isn't applied. Am I doing something wrong here or is there a better way to do this? It seems weird to me that global is needed even though the component has the class declared locally.
Thanks!
My experience working with Modals is that the modal element is actually extracted out of the DOM tree where your component lives and placed at the top most level right under the body tag.
<body>
// Component where the Modal is declared
<Form />
<div>
// Modal appears here
// Styles are not applied because Modal is not nested within Form component
</div>
</body>
It is possible that your local style is not applied because of this reason.
I'm trying to style a component in my React application, but I do not want to create an external stylesheet because it's a small project. How can I style this image component without using an external stylesheet?
return (
<div>
<Image>
<div>
<img src='./resources/image.png alt='image'>
</div>
</Image>
</div>
);
I've found resources online for using inline styling on a specific element, but I want to make my code clean by putting it at the top of the component like using a style tag at the top of an HTML file. I haven't been able to find anything that resembles this in React.
For inline styles you can define a style object, either at the top of the file, or in your render method, and then refer to it:
var myStyle = { margin: 10 }
return (
<div>
<Image>
<div>
<img style={myStyle} src='./resources/image.png alt='image'>
</div>
</Image>
</div>
)
More info in the docs: https://reactjs.org/docs/dom-elements.html#style
Internal CSS styling in JSX is very similar to how it's done in HTML. The only difference is that you need to declare the style names as variables because they are treated like JS objects. With this in mind, you also need to end each property with a comma instead of a semicolon, and the last property should have no punctuation at the end. Using this approach, you should also use style={} instead of className={}. You can read more about JSX styling here.
const myStyle = {
width: '300px',
height: '300px',
border: '2px solid black'
}
const Image = () => {
return (
<div>
<img style={myStyle} src='./resources/image.png alt='image'>
</div>
);
}
You can do something like this:
const Image = styled.div`
background: #1d9ac2;
img {
border: 1px solid red;
}
`;
There are several solutions for this, and a big debate about which one is "the best".
I don't know which one is the best, but I can tell you which one I use:
Styled components (https://www.styled-components.com/)
With this, you would define an object like this
let styled = require('styled-components');
// Or for fancy people
import styled from 'styled-components';
const Image = styled.div`
background-color: red;
/* You can even put classes or selectors in here that will match the sub-components */
.some_class_used_inside { color: black; }
img { width: 100px }
`
and use it like this
return (
<div>
<Image> {/* This will be the `<div>` with `background-color: red` */}
<div className="some_class_used_inside"> {/* This will now have `color: black` applied */
<img src='./resources/image.png alt='image'> {/* This will have `width: 100px` applied to it */}
</div>
</Image>
</div>
);
Ofcourse, there are many other libraries to do it, and everyone will have to find their own favorite I guess :)
I am having trouble getting my styled component to make a change to an <input /> wrapped in a React component. In Dev Tools I can see the style I am trying to override here:
.ui.input input {...}
I think the wrapping component needs to pass className to input i.e
<input className = {this.props.className} ..> ... </input>
but I cannot get the style to override with or without that. I will provide some snippets below.
//styled component
const StyledSearch = styled(Searchbar)`
&.ui.input input{
border: 0px !important;
}
`;
class SearchBar extends Component {
...
render() {
const style = {
display: this.state.showResults ? 'block' : 'none',
maxHeight: 500,
overflowY: 'scroll',
};
return (
<div className="ui search fluid" ref="container">
<div
className={`ui icon fluid input ${this.props.loading ? 'loading' : ''}`}>
<input type="text"
placeholder={this.props.placeholder}
onFocus={this.focus}
className = {this.props.className}
value={this.props.value}
onChange={this.props.onChange}/>
<i className="search icon"></i>
</div>
<div
className="results"
style={style}>
{
this.props.results.map((result, index) => (
<a
className="result"
key={index}
onClick={this.select.bind(this, result)}>
<div className="content">
{
result.get('image') ?
(
<div className="image">
<img src={result.get('image')} style={{ maxWidth: 50 }}/>
</div>
) : null
}
<div className="title">
{result.get('title')}
</div>
<div className="description">
{result.get('description')}
</div>
</div>
</a>
)
)
}
</div>
</div>
);}}
Basically, styled-components creates a new unique class name (in other words, a new namespace) for any DOM or React Components for which the styled function is called.
That means, when you use styled(SearchBar), styled-components wraps SearchBar component and attaches a unique class name to its root DOM. Then it passes that unique class name to the descendent DOMs and components (in your cases, nested div, input, a).
For this method to work, your root DOM must have a className that can be configured from outside. That's why, styled-components expects that, root DOM has the definition ${this.props.className} as the value of its className props. If your component lacks this, styled-components will not be able to create a new namespace which it can use to apply styling specific to it.
So, for your technique to work, you must assign ${this.props.className} as one of the values of className prop defined at the root div of SearchBar.
Working Demo
If you don't have access to SearchBar, you can wrap it with another component. Overhead of this process is that, you have to use an extra DOM level
Working Demo
From what I can tell, you need to apply the styles generated with styled-components to the wrapper element. This is due to the specificity of the .ui.input input external style. Meaning we can't simply target the input element with a new style because the .ui.input input selector is more specific and takes precedence. Here's a simple CSS example showing how the specificity of the .ui.input input selector takes precedence over the input styling:
.ui.input input {
border:2px solid red !important;
}
input {
border: 0px !important;
}
<div class="ui input">
<input />
</div>
This same issue is at play in your case. In the example below I've created a new Wrapper component, which has a style of:
&.ui.input input {
border: 0px !important;
font-size: 24px;
}
defined on it. This targets the inner input element, with more specificity, to override the external styles.
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
class InputWrapper extends React.Component {
render() {
const Wrapper = styled.div`
&.ui.input input {
border: 0px !important;
font-size: 24px;
}
`;
return(
<Wrapper className="ui input">
<input type="text" placeholder="Input" />
</Wrapper>
)
}
}
ReactDOM.render(
<InputWrapper />,
document.getElementById("app")
);
Here's a WebpackBin example.
Currently at version 4 you can do it as simple as
const Input = styled.input`
border:2px solid red !important;
`;
it will rendered as native input with SC className