Working with antd components, if you have an Alert component, inside there is a tooltip that is given the styling through ant-alert-icon class. So, if we need to override the Tooltip color, you can have in your stylesheet a class to override the values. For example:
ant-alert-info {
.ant-alert-icon {
color: #3d6de7 !important;
}
}
However, this will apply the color #3d6de7 to all Alerts type Info. How can I apply a different color to just one specific Alert type Info while keeping the styling above for the remaining Alert type Info components? Is this possible? What are the alternatives to doing something similar?
I am able to change the background of the Alert using the style field as follows:
<Alert
description={}
type="info"
showIcon
style={!props.alert ? { backgroundColor: "#F4F0F0"} : { backgroundColor: "#fff2f0", border: "#ffccc7" }}
/>
However, I have not been able to change the Tooltip color.
Thanks!
You can set an additional className like ant-alert-info-custom this way:
<Alert
description={}
type="info"
showIcon
className="ant-alert-info-custom ant-alert-info-custom-with-red-icon"
/>
And use it like this:
.ant-alert-info.ant-alert-info-custom {
// some shared styles by all custom alerts
.ant-alert-icon {
color: #3d6de7 !important;
}
// specific style for red icon
&.ant-alert-info-custom-with-red-icon{
.ant-alert-icon {
color: red!important;
}
}
}
As you can see you can do this:
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
<Button>My Button</Button>
</ConfigProvider>
I think you can use ConfigProvider to overwrite Antdesign styles. Check out the link for more info:
ConfigProvider.
Related
I created an alert controller and am trying to style the header of the alert. I have checked out the docs but i couldn't find any solution.
async showAlert(header, subHeader, message) {
const alert = await this.alertCtl.create({
cssClass: "my-custom-class",
header,
subHeader,
message,
buttons: ["Ok"],
});
alert.present();
}
How do i style the header of the alert ?.
Edit:
This is the global.scss file
.my-custom-class {
.alert-wrapper {
.alert-head {
color: green;
}
}
}
Have tried this as suggested by #Vijay Kumawat but it still the same.
You have to add a custom class to the alert while creating the alert which I can see is my-custom-class in your alert. You can use this class as below to customize the alert style
.my-custom-class {
.alert-wrapper {
.alert-head {
// header styling here eg. background
h2 {
// header text styling here eg. color, font size
}
}
}
}
EDIT: the text in the header are in h2 tag so styling regarding text (font size, color etc. ) will go under h2 otherwise h2's default style will override the custom css added directly to .alert-head
NOTE: you can check the ion alert's element structure using inspect element.
I added this constant
const isLoading = !templates;
In order to Change the color of my button and prevent a click if my cards are still loading.
However, I dont know how to add my isLoading constant to this conditional statement.
<MenuButton
className={
!firstTimeOnOnboarding || selectedTemplatesIds.length >= minNumOfOptions
? `${styles.actionBlue}`: `${styles.actionNormal}`}>
{buttonText}
</MenuButton>
I tried doing this but it doesnt work.
className={
!isLoading && !firstTimeOnOnboarding || selectedTemplatesIds.length >= minNumOfOptions ? `${styles.actionBlue}`: `${styles.actionNormal}`}
If you want prevent click, what you do really need is disable button while Loading variable is true, as MenuButton is a custom component, you should create a prop "disabled" to manage button disabling.
This is an example with a HTML button tag. I added global class for the button to manage disabling and common attributes, if you want use more pretty option you can use "classnames package" for use multiples CSS classes
JSX:
<button
className={
!firstTimeOnOnboarding || selectedTemplatesIds.length >= minNumOfOptions
? `${styles.actionBlue} ${styles.myButton}`: `${styles.actionNormal} ${styles.myButton}`}
disabled={isLoading}
>
{ isLoading ? 'Loading' : buttonText}
</button>
I added a CSS class because is a good practice show to user disabled button of visual way, and maybe you wonder how to do it.
CSS:
.actionBlue {
...your styles
}
.actionNormal {
...your styles
}
.myButton {
...if you want common styles, here
}
.myButton:disabled {
opacity: .5;
}
Tips: I manage text my button while it is loading with this conditional.
{ isLoading ? 'Loading...' : buttonText}
Also I think, you should manage disibiling of your button with a "CSS Specificity".
.myButton {
...if you want common styles, here
}
.myButton.actionBlue {
...your styles
}
.myButton.actionNormal {
...your styles
}
.myButton:disabled {
opacity: .5;
}
I want to use a useState hook to change the color of my react icons to blue in my sidebar upon clicking one of them. I tried this
const [changeColor, setChangeColor] = useState('blue');
and then in the return
<IconOuter onClick={() => setChangeColor(changeColor)}>
{item.icon}
I would like to know what I am doing wrong? Any help would be greatly appreciated. Thank you.
Upon further inspection, I styled using component styles, so this is my css for the icon. It looks like theres a span surounding the icons which may be easier to style.
const IconOuter = styled.span`
background-color: white;
border-radius: 5px;
padding: 10px;
width: 44px;
height: 44px;
left: 8px;
top: 8px;
`;
When using the useState hook you create a variable and a method, the variable is used to store the state and the method to change the value of the variable. The variables initial value is gained from the value inside the useState hook and you can change that value latter by using the method you defined from the useState hook
This is the basic form of the useState hook:
const [state, setState] = UseState(<initial state>)
So your code should be :
const [myColor, setmyColor] = useState('white'); //the color is currently white
<IconOuter onClick={() => setColor('blue')} />
const IconOuter = styled.span`
background-color: ${ myColor };
border-radius: 5px;
padding: 10px;
width: 44px;
height: 44px;
left: 8px;
top: 8px;
`;
I can see that the default value for this state is blue and in your code, you just call setChangeColor and pass 'blue' again so if you click on it again and aging, still state is blue since you just pass 'blue' to your changeColor state method(setChangeColor()).
So I can just see that the state gets the same value as the default value all the time.
You haven't put the rest of the code but in this small piece of code that you have shared here, I can see that you are not using this state value anywhere.
You can try inline CSS as
<IconOuter onClick={()=>setChangeColor('blue')} style={{color:changeColor}}/>
If you want component style try using color instead of background-color in CSS.
Here is an example that can be helpful. In this case, I want to update the colour of my heart IonIcon when a user clicks on it once, so I first wrapped it in touchableOpacity to get that blink effect. If you don't want to wrap it, you simply put the onPress function inside the icon.
function MyComponent= () => {
const [defaultcolor, setNewColor] = useState('white')
return (
<View>
<TouchableOpacity style={styles.MyRoundButtonStyle} onPress={() =>
setColor('green')} >
<Ionicons name="heart" size={50} color={defaultcolor} />
</TouchableOpacity>
</View>
)};
export default MyComponent;
Note that in the IonIcons I did not make color='green' etc, I rather used the name of the initial state of the state hook (defaultcolor).
Note that it is just a name that you can set to anything like 'mycolor' etc. You may be familiar with the naming convention that is something like [state, setState], it is just a choice.
Do let me know if you need more clarity with this.
const Component = () => <CustomButton color="highlight">Click me</CustomButton>;
const colors = { highlight: "#123456" };
export const CustomButton = styled(Button)`
${({ props }) =>
color: ${colors[props.color]}};
`;
How can I prevent React form rendering "color="highlight" as an inline style in line 1?
I sometimes use CSS named properties to use them within my CSS in JS library as props (styled components in this case).
React renders this HTML, though:
color="highlight" is not valid HTML and displays no color.
Since color="highlight is rendered as an inline style, my styled components stylesheets are not working anymore and the styles are broken.
The correct output should be
// no inline styles applied
<button class="sc-crzoAe dV0xyD sc-cTJkRt jDcPXG" />
// corresponding style sheet class
.sc-crzoAe {
color: #123456;
}
Keep in mind that React handles some CSS properties like width, height as a shortcut to style={{ width: "100%", height: "50%" }}. That's where the behaviour comes from I think.
One idea I had was to just rename the prop, but it would be nice to have a prop called color to take care of the color.
The correct way to set color is this:
export const CustomButton = styled(Button)`
color: => ${(props) => colors[props.color]};
`
An example can be shown here
I am creating cards and I want them to have different color according to their type (angel, demon, etc.) The type is a condition in my JS file according to my database.
I am using SASS and I'm lost !
I tried something like this but it doesn't work at all, any idea ?
.card{
#if .demon{
background-color: yellowgreen;
}
#if .angel{
background-color: aqua;
}
}
I want the all card to change not just where the type appear,
Any help is welcomed thanks in advance !
Welcome Nao,
Supposing we have a flag comming from the API called cssClass: string string is the angel or demon value which came from the API.
then, in our class, at the render method, we can get the cssClass value after we have stored it in the class's state as follows:
const { cssClass } = this.state
supposing we have a Card component that will be rendered when that value changes, we can do this to listen to the cssClass value changes and give a proper className depending on it.
In render method we have this:
render(){
const { cssClass } = this.state;
return(
<Card className={`card ${cssClass.length ? cssClass : ''}} />
)
}
In here: className={card ${cssClass.length ? cssClass : ''}}`
we are asking the cssClass attribute if it holds any length of a string that is greater than 0 as a value, if true, return that value, which could be demon or angel, else, it will return an empty string.
in your css file you'll not need any #if flags, just do the css regularly.
You can use parent selector:
.card{
.demon &{
background-color: yellowgreen;
}
.angel &{
background-color: aqua;
}
}