Is it possible to use styles from the Material-UI theme in a .css or .module.css file? For instance, I want to be able to do something like this:
.barChart {
fill: theme.pallete.primary.main
}
I'm using the d3 SVG component to create a bar chart and I need the fill value for each bar to be based on the colors from the theme. So eventually, my goal is to do something like this:
g.selectAll('rect')
.data(this.props.data)
.classed("barChart", true)
...
For some reason, using makeStyle classes does not work with d3. For such a simple task, I've been searching for hours and could not find a solution.
Related
I am trying to implement the following design:
However, I can't seem to find implementations of this kind of a background container anywhere in the React pie chart libraries I've found. I'm attempting to use react-minimal-pie-chart as they seemed to indicate the ability to render a React component as a custom label:
However, anything custom I do that isn't an svg element fails. Every example I've seen simply uses a <text> element and no background, and I'm not well-versed enough on svgs to see a parallel to divs with text inside. I see you can create a <rect> but not a way to plop some dynamic text inside.
Is there a way I'm missing to do this with this library? Or has anyone successfully implemented this with another pie chart library?
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 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?
Angular Material Documentation for theming states the following to extend an existing palette for custom theming-
var neonRedMap = $mdThemingProvider.extendPalette('red', {
'500': '#ff0000',
'contrastDefaultColor': 'dark'
});
In this, if i want to specify which color i want as the contrast using
'contrastLightColors': ['800']
is it possible? Doesn't seem to be working at all. Just defaults to black on giving contrastDefaultColor.
Is defining a whole new custom palette for this the only option?
I can't exactly use color css property since there are icons also that need to take that color. All those icons are web components (Angular 1.5x) so i want a centralised control over the colors.
What should i do?
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.