I have my element like this:
const Input = (props: InputProps) => (
<div className={classes.InputElement}>
<input {...props} />
</div>
)
.InputElement::after:has(input:invalid) {
content: 'Hello world';
color: red;
}
But the code doesn't behave as intended. I was wondering if this is actually even feasible?
I assume you're trying to add an after pseudo element to .InputElement if the input element has invalid, in such case: .InputElement:has(input:invalid)::after.
Otherwise you're querying for when the after pseudo element has input:invalid which it can't.
I tried so many different things but nothing is working. It either breaks the application or only one style gets applied but not both at the same time. I have a parent component that passes some styles to a child and then the child itself has some local styles as well.
Parent component:
<CardSettings headline="Media accounts" size={{ flex: 1 }}></CardSettings>
Child component CardSettings.jsx:
const CardSettings = (props) => {
return (
<div style={({ background: '#fff' }, props.size)}>
<h2 style={styles.headline}>{props.headline}</h2>
{props.children}
</div>
)
}
What do I do wrong here? In this case flex: 1 gets applied but not background: #fff
Considering your size prop is an object you could use spread syntax to merge in those styles with the ones already inside that div:
<div style={{ background: '#fff', ...props.size }}>
<h2 style={styles.headline}>{props.headline}</h2>
{props.children}
</div>
Pre-ES6 Solution:
Alternatively you could try Object.assign as so:
<div style={Object.assign({{}, background: '#fff', props.size)}>
<h2 style={styles.headline}>{props.headline}</h2>
{props.children}
</div>
I'm using Material UI styling. it's my first time using that platform and it will be my last time. but for now, I'm stuck with it. so I have a question. I have something like:
.map(section => (
<Section className={classNames(classes.section, section.class)}>
<div className={classes.content}>
...
</div>
</Section>
))
where section names generally look like Section1, etc. I then want to style so I'm trying this:
{
section: {},
Section1: {
backgroundColor: 'black',
'& img': { ... }
content: { border: '1px solid pink' }
}
}
but the pink border is not getting applied and I can't figure out why
it appears the images get styled as expected, I see this in the generated code:
.makeStyles-Section1-415 {
content: [object Object];
}
.makeStyles-Section1-415 img {
margin-left: 400px;
}
from which it's obvious that the MUI class generator doesn't know how to produce the inner class name. obviously '& .content' wouldn't work either as the actual class name generated will look something like makeStyles-content-415
so what is the correct incantation to make this work?
p.s.
obviously I can do something heinous like:
{
Section1Content: {}
}
but if that's the correct answer it's a powerful reason to rip this styling system out completely
the answer is:
Section1: {
'& $content': { border: '1px solid pink' }
I am trying to detect click events on an elements ::after pseudo element.
I'm hoping something like this is possible:
//css
div:after{
content:"X";
display:block;
}
//jsx
class PsudoExample extends Component{
render(){
return(
<div onAfterClick={() => {}}>
</div>
)
}
}
Ideally I would like a solution that doesn't involve the use of document.queryselector or something like that.
I don't believe there's a way to distinguish click events from an element and it's pesduo element(s) - the same event handler will fire when the user clicks on either.
One thing you can do though is use CSS to disable pointer-events on the host element, while allowing pointer-events on the element's pseduo element(s). That would give you a "half-way-there" mechanism for detecting clicks on pseduo element(s) only:
div:after{
content:"X";
display:block;
pointer-events: initial;
}
div{
pointer-events:none;
}
With that, you would then use the regular onClick handler which should now only fire when the ::after element is clicked:
class PseudoExample extends Component{
render(){
return(
<div onClick={() => { console.log("after clicked"); }}>
I host a pseduo elements
</div>
)
}
}
Hope that helps!
You can set a click handler on the parent, but that won't tell you that the click was exactly on the "x" button.
Pseudo elements are meant to be used for decoration only. That's why you wouldn't need to write HTML for them and they are fully written in CSS.
If you have an "X" button that does something, you are better off adding a button element for it. Pseudo elements are not made for this. They are also not accessible (cannot have keyboard focus).
class PseudoExample extends React.Component {
render () {
return (
<div>
<button onClick={this.close} type="button" class="close"/>
</div>
)
}
close = () => {
console.log('clicked')
}
}
ReactDOM.render(<PseudoExample/>, document.querySelector('main'))
.close {
border: none;
}
.close:after {
content: "X";
display: block;
}
<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/>
I hate "you are doing it wrong" answers too. But in this case I think a small change (hopefully it's small in your case) is a much better option.
const handleClick = (item, e) => {
let divLength = 210; // depends on your width
if(e.nativeEvent.layerX < divLength) {
//your code goes here
} else {
console.log("clicked after")
}
return (
<div onClick={(e) => handleClick(e)}>Click me</div>
)
e.nativeEvent.layerX returns the width of the clicked area of the element from left to right.
Suppose I want to change the standard white background color of the Select component to green.
My try...
<Select
style={{ backgroundColor: 'green' }}>
// Options...
</Select>
...didn't do it.
Can someone point me in the right direction?
[EDIT]
I ended up using the suggested approach from Jesper We.
Overwriting the color for all selections...
.ant-select-selection {
background-color: transparent;
}
...then I could style the Select components individually.
<Select> renders a whole set of <div>s, you need to take a look at the resulting HTML element tree to understand what you are doing. You can't do it through the style attribute, you need to do it in CSS.
The proper place to attach a background color is
.ant-select-selection {
background-color: green;
}
This will make all your selects green. Give them individual classNames if you want different colors for different selects.
For my form with Select element a have some code in render:
const stateTasksOptions =
this.tasksStore.filters.init.state.map(item =>
<Select.Option key={item.id} value={item.id} title={<span className={`${item.id}Label`}>{item.title}</span>}>
<span className={`${item.id}Label`}>{item.title}</span> - <span class="normal-text">{item.help}</span>
</Select.Option>
)
return (
....
<Select
mode="multiple"
value={this.tasksStore.filters.selected.state.map(d => d)}
onChange={this.handleTasksStatus}
optionLabelProp="title"
>
{stateTasksOptions}
</Select>
....
)
And some css for colorizing.
Result:
Try dropdownStyle instead of style.
<Select
dropdownStyle={{ backgroundColor: 'green' }}>
// Options...
</Select>
dropdownStyle is one of select props.
reference: antd select
From their official docs https://pro.ant.design/docs/style
Override the component style
Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.
Antd Select In multi-select state, the default will show all the select items, here we add a limit height for display scroll bar when the content beyond this height.
// TestPage.ts
import { Select } from 'antd';
import styles from './TestPage.less';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
ReactDOM.render(
<Select
mode="multiple"
style={{ width: 300 }}
placeholder="Please select"
className={styles.customSelect}
>
{children}
</Select>,
mountNode,
);
/* TestPage.less */
.customSelect {
:global {
.ant-select-selection {
max-height: 51px;
overflow: auto;
}
}
}
Two points need to be noted:
The imported antd component class name is not translated by CSS Modules, so the overridden class name .ant-select-selection must be put in :global.
Because of the previous note, the override is global. To avoid affecting other Select components, the setting needs to be wrapped by an extra classname to add range restriction
with all the above answers you cant change the styles of tags conditionally but with below approach you can.
You can do a hack and change the styles as you like of tags of select dropdown.
You can use dropdownRender of select which takes 2 arguments
menuNode
props
use props children property to reach to each tag and change the styles and you can conditionally change the styles as you like.
for reference below is the example link for code sandbox
Select Tags Styles Sanbox
May not be an efficient way to do it but you can use this for now to meet your business requirement.
Thanks
Somebody stated the selector to be
.ant-select-selection {...
However it should be selector as follows:
.ant-select-selector {
background-color: green;
}
They implemented this feature with v4 of ant design:
https://github.com/ant-design/ant-design/pull/21064
But beware before blindly upgrading from v3 -> v4 - a lot has changed:
https://github.com/ant-design/ant-design/issues/20661
menuItemSelectedIcon={(props) => {
return (mode == "multiple" ?
<Tooltip title="Check to confirm the apps alongwith the vendor">
<input type="checkbox" checked={props.isSelected}
style={{
margin: 5
}}
/>
</Tooltip>
: null)
}}
Lastly I was working on ant dropdown and it did not get style as I wanted and I did not find a good solution for that.
Then I decided to share my css solution for those who are in my situation:
.license-plate-letters {
overflow-y: hidden !important;
min-width: 240px !important;
.rc-virtual-list-holder>div {
height: auto !important;
}
.rc-virtual-list-holder-inner {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
flex-direction: row !important;
flex-wrap: wrap !important;
.ant-select-item-option {
padding: 0.5rem 12px !important;
&:hover {
background-color: #452380d2 !important;
color: white !important;
}
}
}
}
<Select
virtual={false}
popupClassName="license-plate-letters">
<Select.Option key={sth} Title="title">title</Select.Option>
</Select>
In angular, you can override the style with ng-deep
::ng-deep .ant-select-selector {
background-color: red;
}