Question

我正在尝试设置样式组件的子组件的样式，但是它将css发送给父组件而不是子组件/这是我的代码，

export const Card = styled.div`
  position: relative;
  ${props => props.horizontal && `
  ${CardImage}{
     max-height: 60%;
     overflow: hidden;
  }`}
`
export const CardImage = styled.div`
    position: relative;
`

编辑：当我在渲染之前添加条件时，它不起作用

Answer 1

你几乎就在那里，你只是错过了代码中的from flask import Flask, flash, redirect, render_template, request, session, abort import os from sqlalchemy.orm import sessionmaker from sqlalchemy import create_engine from flask_sqlalchemy import SQLAlchemy from flask_mysqldb import MySQL from wtforms import Form, StringField, TextAreaField, PasswordField, validators from passlib.hash import sha256_crypt from functools import wraps app = Flask(__name__) app.config['MYSQL_HOST'] = 'localhost' app.config['MYSQL_USER'] = 'root' app.config['MYSQL_DB'] = 'admin' app.config['MYSQL_PORT'] = 3306 app.config['MYSQL_CURSORCLASS'] = 'DictCursor' # init MYSQL mysql = MySQL(app) @app.route('/') def home(): if not session.get('logged_in'): return render_template('login.html') else: return "Hello Boss!" @app.route('/login', methods=['POST']) def do_admin_login(): cur = mysql.connection.cursor() POST_USERNAME = str(request.form['username']) POST_PASSWORD = str(request.form['password']) result = cur.execute("SELECT * FROM users WHERE username = %s", [POST_USERNAME]) if result: session['logged_in'] = True cur.close() else: flash('wrong password!') return home() @app.route('/logout') def logout(): session['logged_in']=False return home() if __name__ == "__main__": app.secret_key = os.urandom(12) app.run(debug=True)，你需要将CardImage移到Card组件的上方：

编辑（04/04/2018）：

如果要像整个块一样添加条件，则需要从样式化组件中导入export const CardImage = styled.div` position: relative; ` export const Card = styled.div` position: relative; ${CardImage}{ max-height: 60%; overflow: hidden; } `函数并使用：

css

Answer 2

const StyledCard = styled.div`
   //parent styles goes here
`;
const StyledImage = styled.img`
   //image styles
`;

class CardImage extends Component {
   render() {
     return <StyledImage/>
}

export default class Card extends Component {
  render() {
    return <StyledCard>
               <CardImage/>
           </StyledCard>
  }
}

它适用于你吗？

如何在反应样式组件中设置子组件的样式

2 个答案: