I'm using Material ui 3 with react js and wondering how to get Less styling for components. I know that Material UI uses JSS. But what is the right way to do it with less.
I want styling like this:
.component{
color: "red",
.subComponent:{
color: "blue"
}
}
Is the JSS best way to do it? Or can I use only less?
you have to do the {this.props.classes.className} for className of your element and don't put dot in the first of the class name but before all of that you should setup the jss and wrap your component with injectSheet function from jss itself
Related
So, I've been coding react-native way more than react lately and I noticed I can do the react native style of styling things in react, what's the harm in doing so?
E.g
With react instead of doing classNames I can simply do
<div style={styles.something)></div>
const styles = { something: { backgroundColor: "red" } }
What is the harm in doing so?
You can do it that way and it will work, but if you check the documentation, its not recommended mostly for performance concerns:
Some examples in the documentation use style for convenience, but
using the style attribute as the primary means of styling elements is
generally not recommended. In most cases, className should be used to
reference classes defined in an external CSS stylesheet. style is most
often used in React applications to add dynamically-computed styles at
render time. See also FAQ: Styling and CSS.
and this section too
Are inline styles bad? CSS classes are generally better for
performance than inline styles.
I would like my React Data Table to have Material Ui classes so it can work better with the rest of my App. It was mentioned in the docs that you can override the css with styled components but I have not managed to do that nor found an example.
i would like to add Mui class names to the rtd class names for example:
<div class="rdt_TableCell"/>
should be
<div class="rdt_TableCell MuiTableCell"/>
link to mentioned feature:
https://www.npmjs.com/package/react-data-table-component#css-overrides
some basic sandbox to play around with:
https://codesandbox.io/s/react-data-table-materialui-9iebe
The react-data-table-component library does not currently provide any way to customize a cell's classname. When it refers to overriding CSS using styled-components, it means an approach like the following:
const StyledDataTable = styled(DataTable)`
& .rdt_TableCell {
background-color: lightblue;
}
`;
This lets you customize the CSS properties associated with the rdt_TableCell class, but doesn't give you any easy way to leverage the Material-UI TableCell styles except by copying them.
I am trying to customize the paper component to have a width of the full viewport. To be very frank I have a lot such problems if I try to customize any small details.
What I want to be able to do is customize the css that is being shown in the inspect element. In this particular case customize MuiBox-root-138 to have a padding of 0.
const styles = theme =>({
root:{
padding: 0,
width:"100%"
}
});
This doesn't work
What would be the elegant way of manipulating inner components of a MUI component.
Thanks!
I had the same issue, I tried different ways and this worked:
minWidth:"100% !important",
maxWidth:"100% !important",
I'm not sure if it's the same for you but it works.
We are using styled-components in the project and we are wondering if there is a way to have a full styling capability of react-select V2. I mean it's certainly possible to use objects to define styling, but it feels rather inconsistent and makes a bit worse DX.
From my understanding, the styled-components work by creating generated className and attaching to elements. That would essentially mean I would have to use components prop anytime I need to eg. change text color. I cannot use styles if I want to avoid object CSS-in-JS. Is that correct?
Simply put, if the component you want to style with styled-components accepts a className property, it can be styled with it using the styled(Component) syntax.
I see react-select accepts className for every component, so it should work fine.
ex:
import Select from 'react-select';
import styled from 'styled-components';
styled(Select)`
background-color: red;
font-size: 20px;
`;
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle