Im using material-ui with Reactjs. I want to apply on a TextField some custom styles using css. Specifically I want to change the color of the TextField underline and TextField label when I click the input.
I know that I could do it inline with the component but I want to use className and css.
Any ideas ?
Thanks
Since material-ui uses inline styles in JS, its not very convinient and easy to do a custom styling of components by css classes, but its still possible with !important keyword.
First you need to add cutom css class to TextField:
<TextField
id="text-field-default"
className="text-field-custom"
defaultValue="Default Value"
/>
Then, for example, underline style can be overriden like that:
.text-field-custom>input:focus+div>hr {
border-bottom: 2px solid rgb(0, 0, 0) !important;
}
Related
I am quite new to React and I am trying to update the text color of the Progress React component from Ant Design - https://ant.design/components/progress/. I checked through the documentation of ant design but did not find any property or attribute for changing the text color. On doing inspect element, I found that it is using the css class .ant-progress-circle .ant-progress-text. Can anyone tell me how to change the color of component after using it? This is how I am using the component:
<Progress
style={{
position: 'absolute',
top: 50,
left: 750,
color: '#C64242',
}}
width={155}
percent={80}
strokeColor={'#D64242'}
strokeWidth={12}
format={() => 'High'}
type="circle"
/>
I am able to update positions (top, left) of the component, but somehow the color is not getting applied. I am not sure how to tackle this problem!
There are few style classes that applied to the text in Progress which you identified.
.ant-progress-circle .ant-progress-text.
And when Progress is 100% it applies .ant-progress-status-success style also to the text.
So to overcome this issue, need to override these styles Inside specific Progress element. That can be achieved by wrapping that Progress with a div and apply style changes to those .ant-progress-circle .ant-progress-text and .ant-progress-status-success classes which are inside this div.
Progress Element
{/* Here we wrap the Progress component with 'div' and override the style classes
(.ant-progress-circle .ant-progress-text) styles provided by antd styles */}
<div className="progress-div">
<Progress
style={{
position: "absolute",
top: 100,
left: 250
}}
width={155}
percent={percent}
strokeColor={"#D64242"}
strokeWidth={12}
format={() => "High"}
type="circle"
/>
</div>
CSS
.progress-div .ant-progress-circle .ant-progress-text {
color: #32a852;
}
From this we can override the style of text which is inside that div.
If you want to change the text-color for different values of the progress, keep styles for each color and change those styles when each values.
for example -- CSS ---
.progress-low .ant-progress-circle .ant-progress-text {
color: #32a852;
}
.progress-mid .ant-progress-circle .ant-progress-text {
color: #ffbf00;
}
.progress-high .ant-progress-circle .ant-progress-text {
color: #c64242;
}
Now dynamically change the style class that need to apply.
<div className={style}> // dynamic style.
<Progress
// attributes
/>
</div>
check this example codesandbox which have full demo of how to apply different text colors (style-classes) in different progress values.
Simplest way to override antd components style is search class from developer tool(inspect element) and override the class.
for your example it will be
.ant-progress-text{
color:red !important
}
as a result it will override the style globally.
if you want to override the style for specific element only, just add wrapper to the component with css class and override the style
example
<div className="parent">
<Progress
style={{
position: "absolute",
top: 100,
left: 250
}}
width={155}
percent={percent}
strokeColor={"#D64242"}
strokeWidth={12}
format={() => "High"}
type="circle"
/>
</div>
and css will be
.parent .ant-progress-text{
color:red !important
}
and it will override style of that specific element only
I think the only way to change the text color is to overwrite .ant-progress-text class.
check this: How to override style of a single instance of a component
I am using an external library in react called "drag and drop files"
This library only allows adding children to the component and style them.
My problem is, the library's component style "the parent" has unnecessary style elements, and I'm only able to modify the children and change their style inside the parent element. However, I can't change the element's style itself.
My question is, is there a way to update the parent component style even though there's no direct access to it?
Inspect html elements with your browser.
And you can change the styles in your style.css using classes or elements or ids that you inspected.
sorry don't have enough rep for a comment but I would think that if you can get the name of the parent element and if you use styledcomponents (https://styled-components.com/)
you could just override the elements styling by creating a styledversion of it.
for example an Avatar from mui would be overridden by
const StyledAvatar = styled(Avatar)`
background-color: black;
color: white;
`;
You'd still need to import the element though.
a normal element (div for example) could be styled by doing the following:
const StyledDiv = styled.div`
background-color: black;
color: white;
`;
hope this kinda helps.
Edit: to use your own styled components, don't forget to export them :)
It is easy to set the color of a v-icon simply by setting the color prop:
<v-icon color="red">home</v-icon>
However I'm having problems formatting disabled icons. There are no properties of v-icons specific to disabled states, so it seems we must resort to css selectors. For example, in order to set the opacity it is possible to use a css selector:
:disabled { opacity: 40%; }
However, to override the color of an icon it seems I have to resort to something extremely specific like and use !important
.application--light .icon.icon--disabled { color: blue!important; }
Take a look at an example. Is there some way to set the color of a disabled v-icon with a property of the v-icon, or with a simpler selector and without using !important?
By default, Vuetify does not allow CSS styles for most of its components, v-icon included, that's why you should add !important to override the default styles set by Vuetify.
However, you can customize the Vuetify colors creating an external .js file.
I recommend reading the theme configuration documentation provided by Vuetify:
https://vuetifyjs.com/en/features/theme/#customizing
I'm trying to set the color of a placeholder inside a text-area which is my react component dynamically but failing to do so. I'm using CSS for styles where I set my default colors but these colors are updated later by the props. I'm able to set stuff like background-color, color etc easily but unable to set nested properties or pseudo selectors like ::placeholder. Any help is appreciated.
I've tried setting it using plain JS and a couple of other inline styling practices but failing.
<div className="container-textarea">
<TextAreaWrapper
placeholder="Write message"
style={color: props.color }
/>
</div>
//In style props, the color is set dynamically but I want to set the color of that placeholder dynamically as well.
I've tried doing this
const styles = {
color : props.color,
'::placeholder' : {
color : props.color
}
}
If you use style attribute you can use selectors only css properties.
style="color: red"
But there is a way to make it work dynamically, what you need is CSS variables (real spec name are Custom Properties) so you put this CSS into your style file:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: var(--placeholder-color);
}
::-moz-placeholder { /* Firefox 19+ */
color: var(--placeholder-color);
}
::placeholder {
color: var(--placeholder-color);
}
then you can use React to add:
<div className="container-textarea">
<TextAreaWrapper
placeholder="Write message"
style={'--placeholder-color': props.color }
/>
</div>
Also I'm not sure you don't need {{'--placeholder-color': props.color }} one curly braces are react prop value and one are JS object inside.
I apply css in form it should apply when my form is invalid .I also write important but nothing happen .In other words I make a dynamic form from json ,Now I need to validate that form .so I apply css which is not working.why I am apply css because some one suggest that in this how to validate form using $pristine and $dirty in angular? you please why it is not apply
here is my plunker
http://plnkr.co/edit/ECLvOstUxq5tIDrYicF2?p=preview
/* Styles go here */
.ng-invalid {
border :1px solid red !important;
}
.ng-pristine {
border :1px solid blue !important;
}
.ng-pristine {
border :1px solid blue !important;
}
Updated plunker
http://plnkr.co/edit/ECLvOstUxq5tIDrYicF2?p=preview
I press login button nothing happen
You need to update your css into this
input.ng-invalid {
border :1px solid red !important;
}
the class ng-invalid applies to the form as well since it AngularJS detects that the form is invalid so it applies the class to the form.
Edit
It seem that you are using a third party module for your forms. It has it's own validation styles so we have to use it. Here are some notes:
I added the novalidate directive to your formly directive. This will prevent the browser to trigger its default validation, the browser's default validation will not trigger the ng-submit function if it finds an error.
I added an ng-class="{'form-submitted':submitted}" to the form directive itself. (This is similar to the approach of PatrickEvans' answer
In relation to Item 2, I modified the CSS to this. The red border will be applied if the form-submitted class is applied to the parent form.
.form-submitted input.ng-invalid {
border :1px solid red !important;
}
See Plunkr
You have invalid style values: 1 px solid red !important you have a space between the number and px which makes it invalid so it does not render that style.
If using Chrome, you can look at an elements applied styles and if there is a warning symbol next to the style (and has a line through it) it means it is an invalid value. Not sure what the other browsers Developer Tools looks like for this but this is what Chrome's looks like:
As for making the css only apply after hitting the login button you will need to setup a check. You can do this by using the ng-class directive
css
.ng-invalid.apply {
border :1px solid red !important;
}
html
<input type="email" ng-class="{apply:loginAttempted}" />
<button type="submit" ng-click="loginAttempted=true" />
the ng-class will apply the style apply to the element when loginAttempted is a truthy value. So when the element gets the ng-invalid and the apply classes then the border will be rendered.