The release 2.1.3 of react-admin introduced the use of <Typography /> for the NumberField component (and others) in place of <span />.
This component has a style to align text on the right.
const styles = {
input: { textAlign: 'right' },
};
I don't know why, but with the span element the number was aligned left.
Now the number is aligned right, but not aligned with the same margin if there are others number fields.
Code demo (Comment show screen) / Screenshot
I tried to define a className on my component...
<NumberField source="id" className="leftalign" />
with
.leftalign {
text-align: left;
}
...but the class is overridden by the style-generated class NumberField-input-234 (except if I set !important but I would like to avoid this).
My questions are:
Is there a way to align them on the left without the uggly !important css flag or writing style={{ textAlign: 'left' }} each time I use a <NumberField />?
Is there a way to align right with the same margin?
Thanks
This issue has been resolved in react-admin#2.2.0
Related
I'm using the react-native-elements ui framework with ThemeProvider and trying to globally style the text of a component like this...
<ListItem bottomDivider>
<ListItem.Title>Name</ListItem.Title>
<ListItem.Input>DoB</ListItem.Input>
</ListItem>
I want to style this <ListItem.Input> text color red. So I've tried a ton of things similar to the code below, but I can't get anything working. Any ideas?
ListItem: {
inputStyle: {
color: "red"
}
}
I'd prefer to keep the styling global and not to do it inline, if possible.
You have to use ListItemInput
ListItemInput:{
style:{}
}
I'm trying to throw together a simple phone app mockup using React Native & React Native Elements as a set of UI components. I want to set the styling of various elements to a common theme, so I'm following the example in the documentation: https://reactnativeelements.com/docs/customization#using-themeprovider.
But the trouble with the example there (as it says in the docs), it sets the style of all buttons. What I'd like to do is to set the background colour of only the solid buttons for example, leaving the clear buttons, clear! Can anyone point me in the right direction of how to do this?
Current snippet (trimmed to save space):
const myTheme = {
Button: {
buttonStyle: {
borderRadius: 4,
backgroundColor: '#03E0EE',
},
titleStyle: {
color: '#180D43',
},
},
};
...
<ThemeProvider theme={myTheme}>
<View style={styles.footerContainer}>
<Button title="Primary Button"/>
<Button title="Secondary Button" type="clear" />
</View>
</ThemeProvider>
Create a wrapper component for SolidButton and or ClearButton. Make this wrapper components consuming the myTheme context with style props (e.g. ButtonSolid\ButtonClear). AFAIK there are no selector capabilities like in css.
I get the below error on iOS as a dismissable error. (pressing esc button hides the error and shows my app.)
Invalid YGDirection 'row' should be one of: (inherit, ltr, rtl) -
React Native
I am using styled components on my project but I don't think this error caused by the component.
Since react-native uses flex layout, we should be able to use the flex-direction attribute.
My wrapper component is below:
const Wrapper = styled.View`
flex: 1;
align-items: ${props => props.align};
justify-content: ${props => props.justify};
flex-direction: ${props => props.direction};
flex-grow: ${props => props.grow};
flex-shrink: ${props => props.shrink};
`;
Wrapper.defaultProps = {
direction: 'column',
align: 'flex-start',
justify: 'flex-start',
grow: 1,
shrink: 0,
};
Am I missing something?
The full error is something like below:
I faced the same problem and solved it after few hours.
Search for any Text component with direction prop in it.
<Text direction={value} />
change it to
<Text dir={value} />
or any prop name you like
Base on your code, it would be in your Wrapper with the prop name direction.
if you using nativebase and get the same error,
find the <Flex></Flex> tag that have direction="row" options, comment that options will solve the error,
you can also replace <Flex></Flex> with <HStack></HStack> if you want to achieve a similar result
I faced a similar issue in my RN project. For me, the issue occurred because of flex-direction.
If you are using flex, instead of direction, it should be flexDirection.
So instead of:
<Flex direction="row"></Flex>
Do this:
<Flex flexDirection={"row"}></Flex>
This solved my issue.
I am trying to give an element in my page a custom colour but all attempts are foiled by the Vuetify enforcing the important! on the component themes. I have followed the docs and tried:
v-list-item.selection(class="red--text")
and
v-list-item.selection(color="red")
then got desperate and tried
.selection {
color: red
}
and
.theme--light.v-list-item {
color: red
}
But the theme color just overrules everything by applying:
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: rgba(0, 0, 0, 0.87) !important;
}
What do?
You can overwrite it by adding the same rule in your App.vue:
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: red !important;
}
Or you can increase specificity by adding your own class to that element:
<div class="custom-list-item"></div>
...
.custom-list-item {
color: red !important;
}
Or you can specifically change color of all elements inside it, if it works for you:
.theme--light.v-list-item * {
color: red !important;
}
One might work (but not a good practice at all):
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled).selection {
color: red !important;
}
// it's more than Vuetify's style the `.selection` specificity
Edit:
The answer I gave above will not work if you use scoped style
As working around myself, and have read a comment here. I don't think change Vuetify's style in a Vuetify component is easy. Instead, by using a Vuetify's component, you should predefine the colors you'll ever use, and then you could use those colors in the components you want.
To workaround without configuring Vuetify, then you can:
Combine inline style + !important
<v-list-item style="color: red !important">Content</v-list-item>
Don't use Vuetify's component, use vanilla html (for this component) instead
Ever since AutoComplete was removed from material-ui, the list isn't scrollable. Below is a snippet from the yester years which used to work.
<ReferenceArrayInput label="Parts" source="partId" reference="parts"
allowEmpty>
<AutocompleteInput optionText="name"
options={{ listStyle: { overflow: 'auto', maxHeight: 200}}} />
</ReferenceArrayInput>
As per the new documentation of react-admin, AutocompleteInput renders a meterial-ui TextField component. Use the options attribute to override any of the TextField attributes.
I don't seem to find a way to make the list scrollable or set a maxHeight to the list.
Please help