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'
}
}}
/>
Related
I have a form with multiple FormControl (https://mui.com/api/form-control/) components and I have them wrapped in a:
const FormBody = styled(Box)(() => ({
display: 'flex',
flexDirection: 'column',
}));
<FormBody onSubmit={handleSubmitLogin(onLoginSubmit)} component="form">
<FormControl>
...
But I was hoping to create some CSS rules in the theme of MUI but I can't find any component that can be used to encapsulate the FormControl components.
If you're expecting something like Ant Design's Form, then no there isn't any component like that, just use the native form element or Box component='form' to easily customize the styles.
I have a dataTable component looke like below:
<template>
<lightning-datatable
class="pw-table"
key-field="id"
columns={columns}
data={data}
hide-checkbox-column
></lightning-datatable>
</template>
Now I want write some custom css to make table header higher,
.pw-table {
height: 300px;
}
but useless, so how I can do it?
I use loadStyle but failed, I dont know why?
import { loadStyle } from 'lightning/platformResourceLoader';
import accountCustom from '#salesforce/resourceUrl/accountCustom';
You should treat Lightning base components as black boxes. The internal elements of an LWC are protected by the Shadow DOM and Lightning Locker. You cannot style them with your CSS, and you cannot interact with them via JavaScript.
You can style the top-level element (which is actually what you've done here), but you can't style elements within the component. See CSS Style Sheets in the Lightning Web Components Dev Guide.
A parent component can style a child component, but it styles it as a single element.
How can I add general styles to my page inside of one of my components. For example, I when my components loads, I want to add a style like this to whole page:
*{
direction:rtl;
}
and when the component unmounts, I want the style to be removed. I am using css modules for styling.
We can do it using jsx style:
<style jsx="true">
{`
* {
direction:rtl;
}
`}
</style>
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.
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.