i want custom style like margin-left, height, widht in react-loading.
i'm only can custom color, but custom margin doesn't work.
<Loading type ='spinningBubbles' color='#0088CF' />
Best wishes! Wish for replying.
You add custom styles using the style prop on DOM element components.
<div style={{ margin: '100px' }}>
<Loading type ='spinningBubbles' color='#0088CF' />
</div>
if you have access to change the loading component you could pass the style (or just the margin value) through to the underlying DOM elements as a prop.
If you have a lot of custom styling to do, there is a great library called Radium for making it easier.
Related
I'm trying to add a custom label with a circular border to the right of a ReferenceLine as shown here https://imgur.com/a/svCsNVZ and as it says you can do in the docs here http://recharts.org/en-US/api/ReferenceLine#label .
The issue we’re having is that whenever we try to pass a component in here <ReferenceLine {...props} label={<CustomizedLabel />} /> nothing ever gets rendered, no matter what I try.
I can’t find any examples where they have specifically done this to a reference line label, but have managed to get the component passing functionality working for the data points, so I’m not sure where we’re going wrong here.
Currently, we can customise the label using an object but when passing our own element in nothing is rendered.
<ReferenceLine
y={dataLimits.lL}
stroke={Colors.red.hex}
strokeDasharray="3 3"
label={{
position: "right",
value: dataLimits.lL,
fill: "#595959",
fontSize: "0.75rem"
}}
ifOverflow="extendDomain"
/>
We want to convert this to
<ReferenceLine
y={dataLimits.lL}
stroke={Colors.red.hex}
strokeDasharray="3 3"
label={<LimitLabel />}
ifOverflow="extendDomain"
/>
where LimitLabel has the properties above but with a circular border.
No error messages appear on the console, and no components appear in the DOM where it should be.
This is a jsfiddle with our current implementation without the custom component, if that helps demonstrate
https://jsfiddle.net/rbyztucn/1/
The docs on recharts are really limited on this, but from my experiments and the idea from #rebecca on using SVG elements, I realised that the label prop on these ReferenceLine components expects an SVG element, not a React DOM element.
I will update this comment when I find out more on positioning these elements; I have a feeling I can use Recharts inbuilt locating utils to make this fairly easy.
A nice side effect of this is that you can pass SVG icons to these labels easily too.
This is probably late, but I ran into the same problem recently and managed do find a solution.
Like J Rhodes mentioned, the documentation is very vague on how to create customized labels using Recharts. The lib is great but the documentation does need some improvement.
As far as I've noticed, any label prop or even the <Label /> component itself can only render SVG elements by default. One way to overcome this limitation is by declaring a customized SVG element using <foreignObject> and a rendered React element as children, like this example:
const renderCustomLabel = ({ viewBox }) => (
<g>
<foreignObject x={0} y={0} width={100} height={100}>
<div>Your custom content goes here...</div>
</foreignObject>
</g>
)}
On the component (<ReferenceLine /> and <ReferenceDot /> as label prop and <Label /> as content prop) call, all you need is to pass the function reference like this:
<ReferenceLine label={renderCustomLabel} />
Ps: The viewBox prop gives dynamic access to the parent component position.
How can I access to inner css classes of children of a component and add or change styles to/of them? like I want to change and customize material ui stepper steps circle font size and color and so on.
How can I write css classes like bellow:
.stepper circle {
font-size:18px;
}
or
.stepper .text {
font-size:18px;
}
thanks.
Thanks to #spakmad's answer, but that's not exactly what I meant, maybe my question was not clear enough. I meant how to write above mentioned CSSs in material ui object style classes format(classes injected with withStyle HOC).
I found my solution:
stepper:{
'& circle':{
fontSize: '18px'
}
}
and
stepper: {
'& .text': {
fontSize: '18px'
}
}
The very straightforward way to do it without having to worry about classes is by using the material-ui style prop. Like so,
<Stepper style={{ fontSize: '18px' }} />
This applies a style to the root element, which I assume to be a div or container of sorts, although it probably varies by the component.
More specifically, and what you probably want to do is use material-ui classes prop. That is, since you know exactly what classes you want to override, you can do so as follows,
<Stepper classes={{ text: { fontSize: '18px' }}} />
I use text here as a classname because in the question, .text appears to reference and already existing class. Since you're trying to increase the size of the font in this svg that comes with the Stepper. You'll need to get the class name applied to the svg and override it. In this case, one of its classnames is MuiSvgIcon-root-184 so you would expect to be able to do,
<Stepper classes={{ MuiSvgIcon-root-184: { fontSize: '18px' }}} />
This classname however is generated by material-ui dynamically based on the layout resulting from props and could be different across all renders.
TLDR
So, trusty className component and writing some css and component JSX as follows.
<Stepper className={'customStepper'} />
.customStepper svg: {
font-size: '18px !important',
}
You need to include !important to make sure this style is respected. Material UI by default puts its styles last in the document so they're normally overwriting anything else, but the !important spec should override the override.
As part of a React and Material UI project,
In the main div I have:
<AppDrawer />
<AppHeader />
<Grid container align={ "stretch" } direction={ "row" } justify={ "center" }>
{ ...something... }
</Grid>
Where AppDrawer and AppHeader are Drawer and AppBar components of Material UI.
I'm having a hard time trying to make the Grid component take the rest of the page (besides the AppHeader component).
I tried using CSS and height: 100% the html, body, and #root tags, but that still doesn't work.
Over at the documentation they're using the align={ "stretch" } prop, but that doesn't work either.
What am I doing wrong?
Let imagine I import library react-select or any other that I don't have direct access to its component and jsx. Is it possible to pass your own style to child DOM element like drop down menus from other library. Like your can with normal css div div div{... here you will style only children}. I am using Radium.
In my case I want to change the z-index of Select Select--single is-searchable class and style drop down menu.
Radium provide so called Style component that allows you to style such components that you imported from other libraries Link: https://github.com/FormidableLabs/radium/tree/master/docs/api#style-component.
Example:
<Style
scopeSelector=".scoping-class"
rules={{
color: 'blue',
span: {
fontFamily: 'Lucida Console, Monaco, monospace'
}
}}
/>
I'm trying to figure out how to apply css styles to :active and :hover states of a Material-UI Menu.
The docs say,
selectedMenuItemStyle | object | | Override the inline-styles of selected menu items.
But applying,
<Menu selectedMenuItemStyle={{ color: 'red'}}>
<MenuItem
style={ menuItemStyles }
primaryText={ pages.dashboard.title.toUpperCase() }
containerElement={<NavLink to={ `${pages.dashboard.slug}` } />} />
</Menu>
has no effect when I click on <MenuItem>
I've also tried React-Router's activeStyle and activeClassName which have no effect because Material-UI overrides them.
Anyone know how to apply :active and :hover correctly?
Have a look there : material-ui
Every component provides a className property. Those properties are always applied to the root element.
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.
try to add !important on your custom style to override material-ui like
.test-class:hover {
color: red !important
}