In web css, we can set css for sub element. Example:
<div class="test">
<p>abc</p>
</div>
And we can set the <p> css by:
.test p {
font-size:20px;
}
Now in React Native, I have this:
<View style={myStyle.test}>
<Text>abc</Text>
</View>
How we can set the <Text> style by myStyle.test?
Actually you can't use like css children, you have to set a custom style for each element that you wanna use.
CSS in react native is just a subset of web css and it doesn't allow you to do what you do in webCss. All you have is inline css. So you have to style them separately. You can avoid repeating by defining a common style object and pass that instead of repeating.
You can check out this library as well:
https://github.com/vitalets/react-native-extended-stylesheet
According to docs
All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color
Now cascading is not supported in react-native, yo =u have to provide a style prop to each element for it to be styled.
Related
I am using Select from native-base and I'm having problem with trying to customize the selectable options from Select.Item.
react-native: 0.70.5,
native-base": "^3.4.25
<Select>
<Select.Item value="one" label="one" />
</Select>
where it will only render the label, which expects a string. I am not able to render any other component from Select.Item
what I'm trying to achieve looks a lot like the picture below:
Desired Select.Item
Edit: not a solution as it breaks the component value. You have to use leftIcon and rightIcon properties instead
You can use the label attribute to customize the item content.
Something like:
<Select>
<Select.Item
value="one"
label={
<Row>
<Icon as={MaterialCommunityIcons} name="information" />
<Text>one</Text>
</Row>
}
/>
</Select>
In my opinion, the attribute name is misleading. You can also use leftIcon and rightIcon properties on Select.Item. If you can't achieve the customization level you want with these, I'm afraid you will have to create your own Select component based on ActionSheet elements.
Note that this will not be web compatible, so if you need web support it won't be an option. I'm also not sure to which extent other components are supported within this item element.
I am writing my first app in Vue3 and I use composition-api with script setup.
Using v-for, I create components that are inputs (CrosswordTile) that make up the crossword grid.
A problem appeared during the implementation of the field containing a clue to the password.
Since the text doesn't allow text to wrap, I wanted to dynamically change the tag to after a click.
Function in parent component where I handle logic after click that change tile type works fine, but I need to change tag of "target" to and set maxLength to a different value.
If it would help here is whole code on github: https://github.com/shadowas-py/lang-cross/tree/question-tile, inside CrosswordGrid.vue.
function handleTileTypeChange(target: HTMLInputElement) {
if (target && !target.classList.contains('question-field')) {
addStyle(target, ['question-field']);
iterateCrosswordTiles(getNextTile.value(target), removeStyle, ['selected-to-word-search', 'direction-marking-tile']);
} else if (target) {
removeStyle(target, ['question-field']);
if (getPrevTile.value(target)?.classList.contains('direction-marking-tile')) {
iterateCrosswordTiles(
target,
addStyle,
['selected-to-word-search', 'direction-marking-tile'],
);
}
}
TEMPLATE of ParentComponent
<div
class="csw-grid"
#input="handleKeyboardEvent($event as any)"
#mousedown.left.stop="handleClickEvent($event)"
#click.stop="">
<div v-for="row in 10" :key="row" class="csw-row" :id="`csw-row-${row}`">
<CrosswordTile
v-for="col in 8"
:key="`${col}-${row}`"
#click.right.prevent='handleTileTypeChange($event.target)'
/>
</div>
</div>
I tried to use v-if inside CrosswordTile, but it creates a new element, but I just need to modify the original one (to add/remove HTML classes from it basing on logic inside CrosswordGrid component).
How can I get access to the current component instance properties when using the composition API in script setup or how to replace the tag dynamically?
:is and is doesn't work at all.
Just adding a className to a tag doesn't help
<p className="ms-font-m">
sometext
</p>
doesn't change the font
https://developer.microsoft.com/en-us/fabric#/styles/typography
If you want to use the Fabric Core CSS classes directly, rather than with CSS-in-JS, you'll need to include the CSS on your page following the instructions for getting started with Fabric Core:
Add a reference to the stylesheet in the <head> of your page. Simplest way is to use the copy on Microsoft's CDN (grab the URL directly from the docs linked above to get the latest version):
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/10.0.0/css/fabric.min.css">
Add the ms-Fabric class to a containing element, such as <body>, to set the font-family. Then you can use the other classes to set sizes and colors:
<body class="ms-Fabric">
<span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span>
</body>
Not exactly what' I was looking for but here is one way to do it:
https://github.com/OfficeDev/office-ui-fabric-react/blob/86337324a5fd8b522855eb8bdcbf012a868a26ba/packages/styling/README.md#using-fabric-core-classes
import {
ColorClassNames,
FontClassNames
} from '#uifabric/styling';
function renderHtml() {
return (
`<div class="${ [
ColorClassNames.themePrimary,
FontClassNamed.medium
].join(' ') }">Hello world!</div>`
);
}
my understanding per https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling#styling-best-practices is that I need to use getTheme() and styles (not style) prop function for the new way of doing styling. So I'm still looking for a getTheme() solution
==============
here is the list of available fonts
https://github.com/OfficeDev/office-ui-fabric-react/blob/1b9405b3b64839975e16ee1fad04d7868d9e3b99/packages/styling/src/styles/fonts.ts
fonts visualized: https://developer.microsoft.com/en-us/fabric#/styles/typography
colors: https://developer.microsoft.com/en-us/fabric#/styles/colors
You can do it by adding the following code when loading theme:
loadTheme({
defaultFontStyle: { fontFamily: 'Comic Sans MS', fontWeight: 'bold' },
.......
This is available since version 7.21.0 of office-ui-fabric-react
These are the urls where you can find the release and report of bug:
https://github.com/microsoft/fluentui/issues/7416
https://github.com/microsoft/fluentui/releases/tag/office-ui-fabric-react_v7.21.0
https://github.com/microsoft/fluentui/pull/9981
Is it possible to use v-if on style block, like so?
<style lang="scss" v-if="pinkTheme">
.ac-textfield
{
background: hotpink;
}
</style>
I tried this and it's not working (the v-if directive is ignored). I know that I could do this:
<div class="ac-textfield" v-style="{ background: pinkTheme ? 'hotpink' : false }"></div>
However, this will quickly become difficult to maintain if I want to modulate more than one style using the value of pinkTheme. Right now, I'm using CSS selectors to achieve the desired effect:
<template>
<div class="ac-textfield" :class="{ pinkTheme }">
</div>
</template>
<style lang="scss">
.ac-textfield
{
//...
}
.ac-textfield.pink-theme
{
background: hotpink;
}
</style>
However, I don't like this solution very much (I want to achieve greater separation between my themes, and I want the browser to only have to load one theme at a time). Is there any way to make something like the first code block work?
That cannot work as scss must be compiled to css - and this is done at build-time. v-if, though, is executed/interpreted at run-time only.
What would kind of work, is to include the style block in the template part of your single file vue component, but note that you can only use CSS, not SCSS, in there. That has the obvious downside of getting rendered alongside each of the component instances.
Your approach of using conditional CSS classes actually is the correct approach, so you should definitely stick to that.
v-if is used for conditional html rendering and v-if accept the getter function that should return either true or false. You can't use v-if with style.
I want IntelliJ to reformat code inside of a <style> tag in a React JavaScript(jsx) file. When I reformat code now it just reformats JavaScript parts.
I simply want the code to change from this:
to this automatically:
is it possible?
Works fine for me using CSS injection with comment (https://youtrack.jetbrains.com/issue/WEB-18307#u=1490109456558):
// language=CSS
return (
<div>
<style>{`
* {
color: red
}
`}</style>
</div>
);