How to set border-radius to ant design Select component - javascript

I am using ant design and I want to change border-radius of Select component but it is not working. The code is below. And i tried to classname method but it doesn't work.
import React from 'react'
import { Select } from 'antd'
const { Option } = Select;
const Dropdown = ({placeholder ,...restProps}) => {
return (
<Select
style={style}
{...restProps}
placeholder={placeholder}
>
</Select>
)
}
const style = {
width: 450,
borderRadius: '10px',
margin:3
}
export default Dropdown;

If you inspect the element you could find that the style is going to the div with classname ant-select. But the border is set in the inner div element with classname ant-select-selector.
Ant Design doesnt give any prop to override the style for it, but you can override by using CSS.
you can wrap with a custom div and provide CSS to override the style set by ant.
Example,
<div className="my-select-container">
<Select
style={style}
{...restProps}
placeholder={placeholder}
>
</Select>
</div>
and in CSS file,
.my-select-container .ant-select .ant-select-selector {
border-radius:20px;
}

A bit hacky but works quite nice.
Set bordered={false} in the select component (will remove the default border)
Apply the following style to the select field:
.borderedSelect {
border-radius: 10px !important;
background-color: white;
border: 1px solid darkgray;
&:hover {
border-color: #356796 !important;
border-top-color: rgb(53, 103, 150);
border-right-color: rgb(53, 103, 150);
border-bottom-color: rgb(53, 103, 150);
border-left-color: rgb(53, 103, 150);
}
}

Related

when I change the style in just one sass file, it changes in all other style files

I have a problem that is slowing me down a lot, I have to make a 3 screens in react, and in the three there is a progress bar, so I decided to create the bar as a props (no css just to change the colors and bar shapes) the site has 3 "registration" "proposal" and "subscription" screens, and each one has its styling component, however when I change the style of the progress bar of one, it also applies the same style to the another screen, even without me having imported anything
function props
export default function Step(props) {
return (
<div className={"stepBlock" + (props.selected ? " selected" : "")}>
<div className="circleWrapper" onClick={() => props.updateStep(props.index + 1)}>
<div className="circle">{props.index + 1}</div>
</div>
<span>{props.label}</span>
</div>
)
}
HTML(Registration)
const labelArray = ['Cadastro', 'Proposta', 'Assinatura']
const [currentStep, updateCurrentStep] = useState(1);
function updateStep(step) {
updateCurrentStep(step);
}
CSS
.circle
height: 53px
width: 53px
margin: -13px 0px 0px 10px
background-color: #fff
border: 2px solid #5E7278
line-height: 65px
font-family: "Roboto"
color: rgb(97, 120, 123)
font-size: 25px
border-radius: 50%
text-align: center
margin-left: 60px
cursor: pointer
-moz-background-clip: padding-box
-webkit-background-clip: padding-box
background-clip: padding-box
}
I sent the reduced code for better reading,
when I change some style in ".circle ", it changes in all components, even if I only change in "registration.sass"

How to Customize Range Slider?

https://hrx66w.csb.app/
How to customize styles for this slider selected range color & pointer color ?
<input
ref={this.inputRef}
id="sliderId"
className="inputR w-100"
name="sliderName"
type="range"
min={minValue}
max={maxValue}
value={this.state.value}
onChange={this.handleChange(minValue, maxValue)}
style={styleInput}
/>
Use accent-color in your css file
// Example
.inputR {
accent-color: red;
}
This is good for styling inputs type range, checkbox, radio and progress.
https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
From your example, I can say that the style you have applied is overridden by browser. To counter that, you should reset all styles for the slider before any customization. You can add this to your styles.
.inputR {
-webkit-appearance: none;
}
.inputR:focus {
outline: none;
}
.inputR::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%;
background: rgba(179, 35, 179, 0.75);
height: 16px;
}

Change Selected Item Background Color of Semantic UI Form.Select element

I have semantic UI React imported as follows
import { Form } from 'semantic-ui-react'
Now, I am using their Select Component as follows:
<Form>
<Form.Group widths="equal">
<Form.Select //I wish to change the background color of only the selected item
placeholder={"Choose Item"}
value={selectedItem}
className={classes.select}
onChange={handleItemSelectionChange}
options={
items.map((e) => {
return (
{
key: e['name'],
value: e['name'],
text: e['name']
}
)
})
}
>
</Form.Select>
</Form.Group>
</Form>
How can I change the background color and icon color of only the selected item in the Form.Select component.
Thank you.
I did not see any built-in option in their API, but you can achieve this using css, the parent div of the selected option has a class of 'selection' by default, and the option div has a class of 'divider' by default, so you can add something like this in you css -
.selection.dropdown > .divider {
background-color: red;
}
.selection.dropdown > .divider:before {
content: "";
display: block;
background: url("icon.jpg") no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
also you should check out the react.semantic-ui dropdown component which has more options then the select component which is just a wrapper around it.

Update the blue line to white

Do I change the color of the blue line that is generated when I clicked?
class Hello extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(
<div>
<p tabIndex={-1}
style={{}}
onKeyDown={event => alert(event.keyCode)}>
Click to focus, then hit a key.
</p>
</div>,
document.getElementById('container')
);
https://jsfiddle.net/s7bjk42m/
You need to alter the :focus selector of the css. You can remove the outline by using the below and then replace it by adding a border when the :focus state is active.
#container p:focus{
outline:none;
border:1px solid #000;
}
To remove the outline:
This is happening because the paragraph element takes the default browser outline on focus. You can change the code to this to fix this. I have removed the outline that's being added on focus to the paragraph element:
class Hello extends React.Component {
render() {
return <div > Hello {
this.props.name
} < /div>;
}
}
ReactDOM.render( <
div >
<
p tabIndex = {-1
}
style = {
{
outline: "none"
}
}
onKeyDown = {
event => alert(event.keyCode)
} >
Click to focus, then hit a key. <
/p>
<
/div>,
document.getElementById('container')
);
<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>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
Alternatively, you can add this in your css file:
p {
outline: none;
}
To change the outline color:
As #Akiba suggested, in your css file you could add border instead. Borders are much more flexible than outline (Although it is possible to just style the outline, it would not be a recommended approach for many reasons).
p {
outline: none; //Removes outline
border: 1px solid red; //Sets 1px solid red border
padding: 5px; //optionally add padding to space it out
}

ExtJS - How to customize buttons?

I need to create some custom buttons - like a red button with white text, green button with white text, etc.
I followed the accepted answer of the same question "How to change background of hovered and pressed extjs-button dynamically" but did not work for me. It just changes the ui without any interactions. When I click the customized button, it toggles despite the handler function is executed.
ExtJS button has 2 configuration for styling according to documentation: overCls and pressedCls. Despite I set them both pressedCls configuration did not work for me.
Which css properties should I override/define in order to create my own buttons?
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fim
simply, every form component has a property called "cls". So you can use the following:
cls: 'myclass'
Edit for the last issue:
You have to override the x-btn-focus class, to remove/replace the blue background color:
.x-btn-focus.green-button {
background:#46a546;
}
Edit of your your fiddle's css:
.green-button{
background:#46a546;
border: none;!important;
color: #ffffff;!important;
}
.green-button .x-btn-inner {
color: #ffffff;
}
.green-button-over {
background: #4cc54c;
border: none;
}
.x-btn-over.green-button {
background: #4cc54c;
border-color: #4cc54c;
}
.x-btn-pressed.green-button {
background: #5b9f5b;
border-color: #5b9f5b;
}
.x-btn-focus.green-button {
background:#46a546;
}
Try using these css classes :
.x-btn-over.green-button
and
.x-btn-pressed.green-button
I don't know if this is preferable to defining and using a custom UI but it's a quick fix.
Hope it helps
Pedro
EDIT (adding css as in comment below)
.x-btn-over.green-button {
background: #4cc54c;
background-color: red !important;
background-image: none;
}
.x-btn-pressed.green-button {
background: yellow;
background-color:yellow !important;
border:solid 1px red !important;
}
Added some random properties you might need background-image, etc
Following CSS works for me:
.numpad-btn {
background: #008080 !important;
}
.numpad-btn .x-btn-inner {
color: #ffffff;
}
.x-btn-over.numpad-btn {
background: #00baba;
border: solid 1px #00baba !important;
background-color: #00baba !important;
background-image: none;
}
.x-btn-pressed.numpad-btn {
background: #005151;
background-color: #005151 !important;
border: solid 1px #005151 !important;
background-image: none !important;
}
.x-btn-focus.numpad-btn {
background: #008080;
}
I realize this question was related to ExtJS 4, but I wanted to add a solution for those that find this page but want to use ExtJS 6.
In ExtJS 6, you can create a custom theme using Sass that will result in the required CSS classes being generated for you. A tutorial for this can be found here: https://docs.sencha.com/extjs/6.2.0/guides/core_concepts/theming.html
As a simple example, this Sass snippet (after being processed by Sencha Cmd) results in the various CSS classes required for a red button. Note that the $ui attribute becomes the name you reference this style by.
#include extjs-button-small-ui(
$ui: 'red',
$background-color: red,
$border-color: red,
$color: #fff
);
You configure a component to use these classes via the 'ui' config attribute. For example:
{
xtype: 'button',
itemId: 'deleteBtn',
ui: 'red',
width: 180,
text: 'Delete',
tooltip: 'Delete this item',
handler: 'onDeleteClick'
}

Categories

Resources