I'm tryin to apply style to the list of this component from Rsuite:
https://rsuitejs.com/components/auto-complete#%3CAutoComplete%3E
I wanna set a max-height, and overflow.
At the moment I tried to set style={{maxHeight: 150px}} but it applies to the InputContainer not the List.
You can target the popup list via css using the div.rs-picker-menu selector:
div.rs-picker-menu {
max-height: 150px;
overflow: scroll;
}
Sandbox Example
Related
I am using react bootstrap Carousel in my react js code. I am successfully able to customize react bootstrap Carousel indicators. By using below code..
div.crausal ol li{
height: 0.3em;
width: 4em;
background-color: #E77728 !important;
}
But I am not able to change the color of active class for indicator. I have tried this
div.crausal ol li.active{
background-color: blue !important;
}
But it does not work.
This is my carousel class.
<Carousel className={css_class.crausal} touch={true} controls={false}>
// Carousel items goes here //
</Carousel>
I want to change the color of active class indicator.
If someone can give better carousel option other than react bootstrap to solve this issue that will also do
I found a kind of fix after researching longer. What you can do is add normal bootstrap file in your project, import it in your component file and now react bootstrap classes are overridden by this normal bootstrap import. After that you can customize the normal bootstrap file downloaded in your project (bootstrap.min.css). But this is just a fix.
What you can do is:
div.carousel-indicators .active{
background-color: #E77728 !important;
}
I am trying to add background-color through styled component.
If add the styles through style={} attribute it is working as expected but If I add the same style in my styled component file it is not working.
//this is working
<MyStyle style={{backgroundColor: '#fff' }}>
//some component here
</MyStyle>
//This is not working.
export const MyStyle = styled.div`
background-color: ‘#fff’;
`;
Can somebody point me here what I am missing here?
The first example is simply using the react style builtin, you don't need styled components to do this.
The code in the second example, you need to remove the quotes around the color, like this:
//This is not working.
export const MyStyle = styled.div`
background-color: #fff;
`;
Styled components takes css syntax, which unlike json syntax, does not have quotes around option names, color names, etc.
You don't have to put single quote around #fff
export const MyStyle = styled.div`
background-color: #fff;
`;
EDITED:
If there are overriding CSS styles that make your div's background not white just yet, and you can't find them, just add !important to this style
export const MyStyle = styled.div`
background-color: #fff !important;
`;
Regarding the issue about finding existing CSS styles that might be overriding your preferred style, take a look at this: https://www.styled-components.com/docs/advanced#existing-css
I'm trying to build web app using MaterialUI theme and I need to use autocomplete .. It turns out MUI v2 does not have AutoComplete and docs suggest using alternatives. react-select has all functionality I need - but I cannot figure out how to make it look similarly to other controls - specifically how to make floating label to float away when user starts typing or click on dropdown.
What I did:
created a component (IntegratedSelect) that uses react-select from this demo
cloned this file into CustomAutocomplete.jsx and replaced <Input> with <IntegratedSelect>
modified code to pass id to IntegratedSelect and set that id to Select control
.. and tried a lot of different other approaches (setting refs, using FloatingLabel from #material/react-floating-label etc).. with no luck.
Can you please advise how can I trigger float on the label, or otherwise hookup react-select control with floating label?
Any help will be appreciated!
Regards,
VB
P.S. Gist added: https://gist.github.com/mspclaims/e07bf1ff657fa8eb4756bc0514a164fe
Following this comment on a similar issue on GitHub, I was able to get it to work! In my case, I'm using styled-component but it should work regardless of the styling used
import React from "react";
import styled from "styled-components";
import { components } from "react-select";
export const Control = (props: any) => {
return (
<>
<Label isFloating={props.isFocused || props.hasValue}>Select</Label>
<components.Control {...props} />
</>
);
};
const Label = styled.label<{ isFloating?: boolean }>`
left: 10px;
pointer-events: none;
position: absolute;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
z-index: 1;
top: ${(props) => (props.isFloating ? `5px` : `35%`)};
font-size: ${(props) => (props.isFloating ? `0.5rem` : `1rem`)};
`;
You can add your custom control component to Select:
<Select
...
components={{ Control }}
placeholder=""
/>
NOTE: You must ensure your Select component doesn't have an empty default value otherwise, hasValue will always be true
I've been trying to use styled-components with the alpha version of material-ui
According to the documentation, this should work out of the box.
This code:
const StyledButton = styled(Button)`
color: red;
text-transform: uppercase;
`;
return <StyledButton>Button</StyledButton>;
will generate something like this:
<button tabindex="0" class="MuiButtonBase-root-3177716317 sc-bdVaJa sxRGN" type="button" role="button">
...
</button>
It looks good.
However, the only problem I have is the order of the injected CSS styles (pic). Styles from styled-components are injected before MUI's styles which make their priority lower.
Is there any way to solve this without using !important?
In the current release (i.e. non-alpha) version, what you've asked would indeed require !important basis:
"Note that CSS properties defined inline are given priority over those defined in a CSS class. You need to use !important to take precedence over the inline style."
Ref: http://www.material-ui.com/#/customization/styles
Perhaps the alpha hasn't quite moved away from this inline requirement yet or it is still a work-in-progress.
What I've done to overcome this sort of thing myself is to (unfortunately) recreate the entire CSS on a standard <button> element when I need such a solution. Here's an example of how I'm doing that with a react-photonkit "theme"
// #flow
import styled from 'styled-components';
const PhotonStyledButton = styled.button`
font-family: Arial, Roboto, Helvetica, sans-serif;
height: 30px;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 12px !important;
line-height: 1.4;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: default;
background-image: none;
border: 1px solid transparent;
border-radius: $default-border-radius;
box-shadow: 0 1px 1px rgba(0,0,0,.06);
-webkit-app-region: no-drag;
&:focus {
outline: none;
box-shadow: none;
}
color: #333;
border-top-color: #c2c0c2;
border-right-color: #c2c0c2;
border-bottom-color: #a19fa1;
border-left-color: #c2c0c2;
background-color: #fcfcfc;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#f1f1f1));
background-image: -webkit-linear-gradient(top, #fcfcfc 0%, #f1f1f1 100%);
background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%);
&:active {
background-color: #ddd;
background-image: none;
}
`;
export default PhotonStyledButton;
styled-components in general is compatible with any component library. When you write styled(AnotherComponent) we take that component and inject an automatically generated class name. This means essentially it's the same thing as writing <AnotherComponent className="sc-asdf123" />!
The current version of material-ui specifically is a bit difficult to custom style because it uses inline styles. From the MaterialUI documentation:
Note that CSS properties defined inline are given priority over those defined in a CSS class. You need to use !important to take precedence over the inline style.
This means simply using styled(MaterialButton) won't work as the passed-in styles will mostly just be ignored. You need to bump the specificity of your styles to override the inline styles that material-ui ships with. (this article is a great primer on specificity if you're not familiar with the details)
Answer for the alpha version of material-ui
The current alpha version of material-ui has switched to using JSS under the hood. (which is CSS in JS not inline styles, like styled-components) This means the issue is likely to be that the styled-components styles are injected after the default material-ui styles. (which are injected by JSS)
JSS supports custom injection points so you might be able to add a <!-- jss --> comment to the HEAD of your HTML to make sure JSS injects its CSS before the styled-components injected CSS?
Answer for the current version of material-ui
There are two ways to bump the specificity of the styled-components injected styles, one more tedious and one a bit more "hacky". The first one is adding !important at the end of all of your styles:
const Button = styled(MaterialButton)`
color: blue!important;
`
While this works in most cases it gets tedious very fast when you have lots of custom styling in a component. The better way is to use the class name hack:
const Button = styled(MaterialButton)`
&&& {
color: blue;
}
`
These ampersands get replaced with the automatically generated class name meaning the outputted CSS looks something like this:
.sc-asdf123.sc-asdf123.sc-asdf123 {
color: blue;
}
This bumps specificity by a big margin, thusly overriding the defined inline styles, and is less annoying than having to put !important after each rule.
Now we can use <!-- material-ui --> to make sure the styles are injected after it.
By default, Material-UI will look for a html comment named to inject styles after. By adjusting the placement of this comment within your HTML body you can control the order that CSS rules are applied to your components. (ref)
I have application where i need to hide the default dot indicator on the carousel control, and instead for default indicator i have to replace it with customized images?
To hide the default dot indicator in Ext.carousel.Carousel component, use this,
indicator: false
I guess you can inspect the CSS for the indicator object.
For instance, go to the Kitchen Sink > User Interface > Carousel and inspect one of the dots :
.x-carousel-indicator span {
display: block;
width: .5em;
height: .5em;
-webkit-border-radius: .25em;
border-radius: .25em;
margin: .2em;
}
Then, you just need to override that CSS class