I want to add a custom color to IconButton
<IconButton variant='contained'>
<StarBorderRoundedIcon color='red' />
</IconButton>
and this is the output
The red color is not working.
<IconButton variant='contained' style="background-color: red">
<StarBorderRoundedIcon/>
</IconButton>
Color property on the icon here refers to the theme color property so you can define colors as primary,success,action..You can use style property instead something like
<IconButton variant='contained'>
<StarBorderRoundedIcon style={{color:'red'}} />
</IconButton>
Working demo
or you can use sx property
<IconButton variant='contained'>
<StarBorderRoundedIcon sx={{color:'red'}} />
</IconButton>
Related
I can do the following in pure HTML/CSS
<div color="red">
red
</div>
<div color="yellow">
yellow
</div>
div[color="red"] {
color: red;
}
div[color="yellow"] {
color: yellow;
}
However, using React and TypeScript, I want to do something like this:
const Colored = ({ color }: { color: "yellow" | "red" ) => (
<div color={color}>
{ color }
</div>
);
However, I can't add abritrary props to div!!
so we could do exactly the same as the above, but instead
<Colored color="red" />
<Colored color="yellow" />
How can I do something like this? Additionally, should I even be doing this? Is there a better way of doing this in React?
In this case using the type React.HTMLAttributes<HTMLDivElement> you can pass additional properties to the DIV mantaining your component Colored.
type IColoredProps = { color: "yellow" | "red" } & React.HTMLAttributes<HTMLDivElement>
const Colored: FC<IColoredProp> = (props) => (
<div {...props}>
{props.color}
</div>
);
Now the color is mandatory and can only be "red" or "yellow", and you can pass the rest of properties a normal div can have.
<Colored style={{ fontSize: "25px" }} color="red"/>
I created a codeSandBox example for you :
instead of <Colored text="red" /> you should use <Colored color="red" />
I have a question about adding styles to Angular components.
e.g I would like to have every second angular component in a list to have red background-color.
How can I make it happen?
I tried a lot of different things - it seems that it is added in HTML but doesn't work.
<ang-component class="someClass" />
<ang-component class="someClass" />
I tried setting it in parent component styles
ang-component:nth-child(odd) {
background-color: red;
}
but it doesn't work. It shows up while inspecting but there is no visible effect
EDIT: Code - to show an example how it looks
<form [formGroup]="form" class="someParentClass" (ngSubmit)="onUpdateForm()" >
<item></item>
<hr />
<item></item>
<item></item>
<hr />
<div id="btn-save-section">
<button class="cancel-btn" type="button">Cancel</button>
<button class="update-btn" type="button">Update</button>
</div>
I want item components to change - so every second should have background color red
ang-component:nth-child(odd) > * {
background-color: red;
}
because your component root element is probably only a container w 0 width and 0 height
I have a Material UI Textfield time input and I want to change dropdown list color from blue to red on select. For example, I want to change the dropdown select of blue to red.
I'm using Material UI in ReactJS.
Here is the image:
<TextField
id="time"
type="time"
style={{
width: "148px",
marginLeft: 4,
marginRight: 6,
padding: "2px 0px 3px 6px",
}}
defaultValue="07:30"
iconComponent={ExpandMoreIcon}
className={classes.textField}
color="secondary"
InputProps={{
disableUnderline: true,
endAdornment: <ExpandMoreIcon />,
// className: classes.input,
}}
/>;
I want to change the dropdown list color on select from blue to red.
Is there a way to change it??
I am very new to html and css , I have used angular-tabs-component for creation of tabs,so now i want to change background color of tab..can some one suggest me how to do.here is my code...
HTML:
<tabs (currentTabChange)='onSelectChange($event)'>
<tab tabTitle="Live">
</tab>
</tabs
Add class tab to tab tag-
<tabs (currentTabChange)='onSelectChange($event)'>
<tab tabTitle="Live" class="tab-background">
</tab>
</tabs
and then in the css of that component add -
.tab-background {
background-color: red;
}
I want to have a <hr /> in my react application. I want to change the color of it in different places? Is there any way of doing it? If we use a functional component to achieve this, how should be do it?
There's nothing special to it really.
const Rule = ({ color }) => (
<hr
style={{
borderColor: color,
}}
/>
);
const App = () => (
<div>
Here's an orange rule. <Rule color="orange" />
Here's a blue rule. <Rule color="blue" />
</div>
);
ReactDOM.render(<App />, document.querySelector("main"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main/>
The <hr> element, from my experience, if you're leaving it unstyled beyond a color, is best styled through the CSS rule border-color, as in the following example:
.foo { border-color: black; }
<hr class="foo" />
As for React, you could start with their basic CSS prop and expand it from there.
render() {
let className = 'hr-color';
if (this.props.isActive) {
className += ' foo';
}
return <hr className={className}/>
}
you need to set with below css for that :
hr {
background-color: red; //or whatever color you want.
height: 1px;
}