Comments (16)
Did you read http://marmelab.com/admin-on-rest/AdminResource.html#theme?
from react-admin.
I did not. I looked for it, but didn't come across it easily. I feared that I had possibly overlooked it within the docs, and would alternately propose possibly adding another level of items to the navigation within the docs to help those absent-minded devs like myself from overlooking this info.
I have also noticed since posting that the lack of CSS classes comes from material-ui
itself.
from react-admin.
We need to add another chapter dedicated to theming. Now that you know how it works, would you like to bootstrap it?
from react-admin.
I'm not 100% sure what you mean by "bootstrap it". If you mean bootstrapping a custom theme into my implementation via the theme
prop, then yes - I am working on that now. If you meant something else, could you please elaborate?
from react-admin.
@MattWilliamsDev: @fzaninotto meant bootstrapping the new chapter dedicated to theming.
from react-admin.
As in begin to write it? Sorry, but I seem unfamiliar with that usage of "bootstrap/bootstrapping". If so, I would be happy to once I get things working on my end.
Currently, using the theme
prop on the Admin
component isn't working for me.
const myTheme = {
fontFamily: 'Roboto, sans-serif'
, palette: {
primary1Color: colors.orange2
, primary2Color: darkBlack
, primary3Color: colors.grey
, accent1Color: colors.orange2
, accent2Color: colors.ltGrey
, accent3Color: colors.grey
, textColor: darkBlack
, secondaryTextColor: fade( darkBlack, 0.54 )
, alternateTextColor: white
, canvasColor: white
, borderColor: colors.ltGrey
, disabledColor: fade( darkBlack, 0.3 )
, pickerHeaderColor: colors.orange2
, clockCircleColor: fade( darkBlack, 0.07 )
, shadowColor: fullBlack
}
, appBar: {
backgroundColor: colors.orange2
, color: darkBlack
}
};
...
class App extends Component {
render() {
return (
<Admin
restClient={ RestClient }
title="MyTitle"
theme={ getMuiTheme( myTheme ) }
>
...
</Admin>
);
}
}
The theme doesn't seem to ever change. Still investigating what I'm doing incorrectly, as the theme data itself seems to be correct.
from react-admin.
It seems everything is being overwritten with the normal theme in spite of my addition of the theme
prop.
from react-admin.
Investigating the Admin
component in /src
, I am not seeing where theme
is ever accounted for and used. As an alternate method, I tried using the appLayout
prop, but can't seem to be able to pass props into that correctly using the withAppTitle( ... )( ... )
method shown in the source.
This is from the Admin
component:
const Admin = ({ restClient, dashboard, children, title = 'Admin on REST', appLayout = withAppTitle(title)(Layout) }) => {
...
};
Note how it doesn't seem to have any way of accounting for theme
being passed in, nor does it do anything to pass the remaining props passed to Admin
anywhere else down the chain. Is this a bug?
from react-admin.
Which version are you using? The theme is used at https://github.com/marmelab/admin-on-rest/blob/master/src/Admin.js#L15
from react-admin.
I'm using 0.3.1
. I had just begun to think that was a possible issue.
from react-admin.
Are there any breaking changes or anything to know about before making a jump to 0.4.0
?
from react-admin.
No BC break, you can upgrade safely.
from react-admin.
Thank you both for your assistance. Will close this issue once I verify it working in 0.4.0
.
from react-admin.
Once I worked out the issue with NPM not installing peer dependencies (quill), the theme
prop is working. Thanks again for the solid work and quick assistance.
What exactly is it you'd like me to do with the "bootstrapping" of the theming docs?
from react-admin.
Add a new Theming.md
doc chapter, in which you can write the following headers:
- theming the admin (uses material UI themes, what you just did)
- overriding a component style (use the
style
attribute, and point to material ui doc to explain why)
Sounds feasible?
from react-admin.
Definitely sounds feasible. I will make the update sometime today (hopefully).
from react-admin.
Related Issues (20)
- AutocompleteInput in ReferenceArrayInput with dynamic choices shows empty field on selection HOT 5
- Property "resource" in SortButtonProps not involved HOT 2
- Change title property type in core display components <Edit>, <Show>, <View> HOT 1
- Standalone version of the Store for a dual-store strategy HOT 3
- Unable to clear default value in DateTimeInput component HOT 2
- Documented theme level defaultProps overrides do not work for react admin components HOT 4
- Reference Array selected item from a filter query vanishes immediately after selection. HOT 2
- Infinite re-rendering using disabled AutocompleteArrayInput in a ReferenceArrayInput HOT 6
- AutocompleteInput don't keep focus with mouse HOT 5
- Documentation update in sample. HOT 3
- NumberInput's `onBlur` prop does not provide an event object HOT 2
- Add ability to customize query string format for lists HOT 5
- i want to show the received gmail in react js app
- AutoComplete choice listing issue when using useChoicesContext HOT 1
- react admin error with Menu.Item missing properties HOT 6
- storeKey prop is not passed to useRecordSelection hook inside useListController HOT 4
- useEditContext returns null for both values HOT 5
- Infinite loop occurs in page rendering when perPage is set to a negative number in List Component HOT 1
- Codemods are not included in ra-core v5
- Duplicate entries in documentation search HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-admin.