I am using css-modules with react-md (https://react-md.mlaursen.com/) in my project.
I have included dark theme-
#import '~react-md/src/scss/react-md';
$md-light-theme: false;
$md-primary-color: $md-light-blue-500;
$md-secondary-color: $md-deep-orange-a-200;
#include react-md-everything;
This applies the dark theme quite well on my web pages.
Now, my requirement is to be able to customize certain components like applying a background color to Card component, making all text certain color etc. How can this be done, please advise?
Related
I'm working with Material-UI on my NextJS project, and wanted to know if is there a way to replicate the paper background-image on other components ? It will allow me to make some other components the exact same colors as Paper, because this background-image affect the color with a lighter effect.
EDIT: this effect seems to only occurs on dark mode
Thanks
Some components like Card, Dialog, Menu (and more) already use Paper as an inner component, then they get its style. The best way to add it to your components is to just use Paper as a surface.
You can also add variants to Mui components - for example, you add paper variant to TextField, and there add the styles.
A simpler way (but not complete) is to directly add the Mui-Paper className to another component (it is not complete because there are other styles except Mui-Paper. To achieve the elevation background-image effect you mantioned, you should add .MuiPaper-elevation{props.elevation} className.
I can't figure out how to style the fabric ui component. I just want to change the background of the nav bar to be black with white phone instead of white background and black font. However, this seems to be really difficult with the current component.
There is virtually no documenation on how to style either.
https://dev.office.com/fabric#/components/nav
Thanks,
Derek
css inline not working?
Example:
style={{backgroundColor:'black', color:'white'}}
Regards.
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
Is there any way to access theme colors in Sass files. For example, I want to set my text color to the primary color. This is my attempt, which does not work:
.task-duedate {
color: $md-primary;
}
Material Design best practices suggests that one should use white or black as a text(body-content) color which will be done by default using angularJS Material Design Library. For links you can use flat buttons.
I have created a custom theme for my application. The base color of the theme is white. I have a tabpanel on one of my view. There are almost 15 tabs on that view. Not all the tabs can be visible at the same time therefore scrollers are added by default for navigation between tabs at left and right. The issue is the color of the scrollers. With neptune or any other default theme these scrollers are clearly visible but with the custom theme they are plain white. User can't even know that there are srollers there. The scroller image is also not visible. Can someone specify the SAAS variables that configures the scroller appearance? $panel-tool-background-image: 'tools/tool-sprites' or $panel-tool-background-image: 'tools/tool-sprites-dark' do not work either.
The documentation should provide what you need ("CSS Variables" section). There are a few relating to the scroller.
http://ext5-docs.site/#!/api/Ext.tab.Panel
You could also look at using the extjs-tab-panel-ui mixin to create a custom ui for your tab panel:
http://docs.sencha.com/extjs/5.0/core_concepts/theming.html#Creating_Custom_Component_UIs