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
Related
Next.js introduced the Image component. I would like to use it and I am currently struggling to find the way to apply style to it using styled-jsx.
Here is my attempt:
export default function MyComponent({description}) {
return (
<div>
<Image src={concept.icon.url} className="icon" width={40} height={40}></Image>
<div>{description}</div>
<style jsx>{`
.icon:hover {
cursor: pointer;
}
`}</style>
</div>
);
}
The classname is properly transmitted to the underlying dom element, but the style is not applied.
Is there some kind of incompatibility between next.js Image component and styled-jsx?
You need :global() selector.
From styled-jsx documentation (One-off global selectors): "This is very useful in order to, for example, generate a global class that you can pass to 3rd-party components."
CODE:
export default function MyComponent({description}) {
return (
<div>
<Image src={concept.icon.url} className="icon" width={40} height={40}></Image>
<div>{description}</div>
<style jsx>{`
div :global(.icon:hover) {
cursor: pointer;
}
`}</style>
</div>
);
}
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;
}
I'm trying to change the styles of a vuejs-datepicker (https://www.npmjs.com/package/vuejs-datepicker)
<datepicker
format="dd/MM/yyyy"
calendar-class="my_calendar"
input-class="textfield"
name="my_date" />
In the styles section I define this rule, but my datepicker doesn't change the width
.my_calendar {
width: 100px !important;
}
Any idea? Or other plugin for use a datepicker in vuejs?
Thanks
I have faced the same problem and the defaualt css does not works when it is scoped.Now,do the following steps to apply styling to Vuejs date picker and time picker
use input-class="--your--class--name--here " in the place of class
beneath your scoped style tag use another style tag which should not be scoped
`
<template>
<div>
<datepicker
v-model="startDate"
input-class ="my-picker-class"
placeholder="Start Date"
</datepicker>
</div>
</template>
<style>
.my-picker-class{
border: none !important;
border-bottom: 1px solid #F26F31 !important;
}
</style>
`
3. Here i have used my class name .my-picker-class and applied styling there , dont forget to give that "!important" at the end of the styling
Try /deep/ to change css property from parent :
/deep/ .className {
Css property
}
Try adding module style. You want to add styles to calendar-class. So try it this way:
<datepicker :class="$style.input" inputClass="input" />
<style module>
input {
width: 100%;
cursor: default;
}
</style>
Note: I was facing a similar issue with input class. This worked out for me.
CSS for vuejs datepicker can be passed as a prop. There are 3 props, wrapper-class, input-class and calendar class. For example
<datepicker input-class="rounded w-1/2" calendar-class="rounded"></datepicker>
Note: Tailwindcss classes used here.
I have a Angular project with .Net core and I'm using Clarity as well, I was wondering if there is a way to change the color of a Clarity toggle switch?
my code that I've tried so far which was not working:
<input type="checkbox" formControlName="validateAll" Color="red" clrToggle />
<input type="checkbox" formControlName="validateAll" style="background-color:red" clrToggle />
<input type="checkbox" formControlName="validateAll" style="color:red" clrToggle />
Add a custom class to the wrapping div, change the styles to the input as it's said in the documentation
The toggle switch is created by using ::before and ::after on the label tag. So if you name your wrapper class for the div custom-styles then your css should look like this:
.custom-styles input[type=checkbox]+label::before {
border-color: blue;
background-color: blue;
}
and for checked
.custom-styles input[type=checkbox]:checked+label::before {
border-color: red;
background-color: red;
}
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 :)