如何在样式组件中使用常量值

Question

我想将样式组件传递给变量，然后在渲染部分中使用该变量

我不知道如何使用它，通过变量的目的是为了条件

Sample.styled.tsx

import styled from 'styled-components'
export const sampleCoder = styled.div`
border: none;
margin: 0 15px 0 0;
padding: 0 16px 0 0;
export const sampleCoder1 = styled.div`
border: 1px solid black;
margin: 0 15px 0 0;
padding: 0 16px 0 0;

sampleRow.tsx

import React from 'react'
import { sampleCoder } from './Sample.styled'
intrerface someprops{
text: boolean
}
export const CardRowLabelValue = {someprops} => {
let SampleStyle = '<sampleCoder> '
SampleStyle += props.text? ' <sampleCoder1>' : ''
return (
<SampleStyle>
<someOtherStyledComponent>{text} </someOtherStyledComponent>
</SampleStyle>
)

返回值应该是变量值，如何在Return语句中获取变量值有可能吗？

Answer 1

我制作了一个Codesandbox片段，下面是链接

css助手函数生成特定的css，并将其作为模板文本返回。我也会在这里添加代码以防万一。其想法是，如果定义了props.text，则合并样式。还要注意我把${(props) => (props.text ? sampleCoder : "")};放在哪里。将这条线放在border: none之前将覆盖边框样式。

import React from "react";
import styled, { css } from "styled-components";
export const sampleCoder = css`
border: none;
margin: 0 15px 0 0;
padding: 0 16px 0 0;
`;
export const SampleCoder = styled.div`
border: 1px solid black;
margin: 0 15px 0 0;
padding: 0 16px 0 0;
${(props) => (props.text ? sampleCoder : "")};
`;
export default function App() {
return (
<div className="App">
<SampleCoder text={"Text props"}>Text props provided</SampleCoder>
<SampleCoder>No text prop, just children</SampleCoder>
</div>
);
}